我的前端那些事 --less进阶

上一期 “前端那些事—less基础”主要是讲了less的基础用法，今天这篇文章继续学习less的进阶语法。 这一期给大家介绍下less高级操作，以及实际项目的应用，所以这一期代码量会有点大。

第一个：data-uri 从字面看的意思是把url转换成data，实际中的功能是转换文件的类型，参数有两个分别是mimetype（类型）和url（地址）。 例子: data-uri('../data/image.jpg'); 输出: url('data:image/jpeg;base64,bm90IGFjdHVhbGx5IGEganBlZyBmaWxlCg=='); 输出到浏览器: url('../data/image.jpg'); 例子: data-uri('image/jpeg;base64', '../data/image.jpg'); 输出: url('data:image/jpeg;base64,bm90IGFjdHVhbGx5IGEganBlZyBmaWxlCg=='); 例子: data-uri('image/svg+xml;charset=UTF-8', 'image.svg'); 输出: url("data:image/svg+xml;charset=UTF-8,%3Csvg%3E%3Ccircle%20r%3D%229%22%2F%3E%3C% 2Fsvg%3E"); 大家可以看出它的作用了吧，没错它就是为了小型图标转换base64准备的。当然不是说它只是能这样做。

第二个：方法 上一篇讲到了单参数的属性集合，这个方法就是升级，咱们还是通过例子来理解。 .mixin(1) {x: 11} .mixin(2) {y: 22} .mixin(@x) when (default()) {z: @x} div { .mixin(3); } div.special { .mixin(1); } 这样的结构输出会是什么样子大家可以想一下，下面给出答案。

div { z: 3; } div.special { x: 11; } 你想对了吗？？ 是不是发现了原来不仅可以传参数，参数也可以用做来判断，是不是很神奇。 现在参数会有条件了 .mixin(3) 它满足了.mixin(@x) when (default())缺省状态的条件。

第三个：unit、get-unit 为什么把它们两个放到一起呢，它们两个的用法正好相反，还是看下面例子。 例子：unit(5,px) 输出：5px 例子：unit(5px) 输出：5 例子：get-unit(5px) 输出：px 例子：get-unit(5) 输出：//nothing 知道这个方法怎么用了吧。

第四个：percentage、round、sqrt、abs 它们几个都是对数进行操作的函数，还有很多函数，我这里只是列出项目中可能比较常用的函数，看例子。 例子：percentage(0.5) 输出：50% 例子：round(1.67) 输出：2 例子：sqrt(25cm) 输出：5cm 例子：abs(-18.6%) 输出：18.6% 大家看出它们的作用了吧，percentage是换算百分比、round是四舍五入可以选择保留几位小数、sqrt是开方保留单位、abs是绝对值保留单位

第五个：类型函数，主要用于函数判断。 isnumber、isstring、iscolor、iskeyword、isurl、ispixel、isem、ispercentage、isunit 大家从字面上就知道它们的意思了，它们是判断数据类型的，这里我就不一一解释了。

第六个：颜色，主要用于调整颜色这里就简单说下，颜色函数很多，看例子。 例子：rgb(90, 129, 32) 输出：#5a8120 例子：hsl(90, 100%, 50%) 输出：#80ff00 例子：hsv(90, 100%, 50%) 输出：#408000 例子：desaturate(hsl(90, 80%, 50%), 20%) 输出：#80cc33 // hsl(90, 60%, 50%)

我相信看了这几个例子，大家已经知道它们是干什么的了。
复制代码

下面是一个整体的例子，大家可以看一下，试试自己是否已经学会less了。 下面让大家看一下less整体运用的例子： HTML页面代码 ~

我是h1

我是h2

我是div1

我是div2

我是id为inner的div

我是id为inner的div里的h3

我是id为inner的div里的p 我是p里的a链接

我是class为func1的div

我是class为func2的div

~ styles.less代码 @color:red; h1{ color:@color; } h2{ color:@color; } .rounded-corners (@radius: 3px) { border-radius: @radius; -webkit-border-radius: @radius; -moz-border-radius: @radius; } #div1{ .rounded-corners; } #div2{ .rounded-corners(10px); } #div1,#div2{ border:1px solid #333; margin:10px; height:40px; line-height:40px; } #inner{ h3{ color:@color; } p{ color:green; a{ text-decoration: none; &:hover{ color:@color; } } } }

@the-border:1px; @base-color:#111; @black: #ff0000;

.func1{ color:@base-color3; border:@the-border5 solid @base-color3; border-radius: @the-border10; height:40px;

}

.func2{ color:@base-color + #003300; border:10px solid desaturate(@black, 50%); margin:10px; }

这个例子里面就是平时页面样式常用的样式，大家看一下我这个写法还有简便的没有，我也是刚学会很多技巧都还没总结出来。

大家一块猜一下运行结果，本来想给答对的一个奖励，后来想了想大家都这么聪明，既然这样那么，谁没有回答正确请我吃饭怎么样…….既然大家都没意见那就这样愉快的决定了。

赶紧在下方留言，没有留言一律认为回答错误。

这里用两篇结束了less，下面按照计划应该是vue、san框架和uni-app框架。因为最近公司可能一共uni-app所以优先开始uni-app的开发，是基于vue基础的。预知后事如何，请听下回分解。

对了还有一句，正确答案会在下一期公布。预知后事如何，请听下回分解。

转载于:https://juejin.im/post/5c774a7ce51d456a0458940a