less特性小结
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/j_bleach/article/details/52842439
less语言特性
1.概述
最近抽空把less文档看了一遍，感觉使用less还是方便不少，于是对less进行一个简单的总结。less有几个比较方便的部分分别是:自定义变量(定义变量可进行”+、-、*、/运算”)，作用域拓展，以及判断循环等操作，当然less还有很多内置好的函数，比如一些操作颜色的函数(对样式RGB及透明度的快捷操作)，类型判断的函数，都很方便好用，但本次就只对less的语言特性就行简单总结了。
2.less变量
很多时候，我们需要对一些常用的样式进行反复调用，这时如果利用less的自定义变量，就能很好的提升工作效率。比如经常用到某一种颜色时:
@myColor:#eeeeee;
.transfer1{
color:@myColor;
}
.transfer2{
color:@myColor;
}这样，transfer1、transfer2的颜色就被定义为#eeeeee,即编译之后的CSS为：
.transfer1{
color:#eeeeee;
}
.transfer2{
color:#eeeeee;
}以下所有调用，均以此为输出参考，就不再一一列举编译后的CSS了。 颜色，长度等等常用变量是可以进行简单运算的，比如改变刚才定义的myColor。
.transfer1{
color:@myColor+#111;
}有了定义变量这项基础且最重要的特性后，就可以做很多事情了。实际生产中，更多的定义一些复合的样式，然后通过其他id，class去调用。 比如定义一些常用的分割线供<hr>调用：
.lm-divide-line-library {
height: 1px;
border-top: 1px solid #e6e6e6;
}
.transfer1{
.lm-divide-line-library;
}
.transfer2{
.lm-divide-line-library(); //定义的变量后边加()效果相同
}也可以这样写：
@define-line:.lm-divide-line-library;
.@{define-line}{
height: 1px;
border-top: 1px solid #e6e6e6;
}
.transfer1{
.lm-divide-line-library;
}但是感觉好麻烦。。。。所以我很少这样用。
为了让定义的分割线更加灵活，可以让之前定义的高度和上边框赋值变量，比如：
.lm-divide-line-library (@height:1px,@color:#e6e6e6){
height: @height;
border-top: 1px solid @color;
}
.transfer1{
.lm-divide-line-library();
}
.transfer2{
.lm-divide-line-library(@height:2px,@color:#666666);
}如果不传参数，默认会调用之前定义好的1px(其实需要看有没有比1px优先级更高的定义，因为less的变量定义是懒加载模式的，即可以先给height设置@height，再去给@height赋值),less对于变量的读取，遵循就近原则，它会首先查找自身，没有的话会向上查询，有点类似冒泡。
3.作用域
less较之css不同的地方是可以讲样式进行嵌套，比如定义一个id为library下的color1/color2样式。 如果用less写：
#library{
.color1{
color:red; //color1、color2 效果相同
}
&:color2:{
color:gray; // "&"代表当前作用域的父级，即color2的父级 #library
}
}与普通的css跟在后边的写法， 这种洗发更加简洁，可读性更好。
extend
再调用其让他样式的时候，extend也是一个不错的选择。 extend相比于直接调用其他样式，它的好处是，可以将重复输出的样式合并归类在一起。 比如： 之前我们定义两个样式调用
.define{
color：red;
}
.transfer1{
.define;
}
.transfer2{
.define;
}编译less输出的CSS为：
.transfer1{
color:red;
}
.transfer2{
color:red;
}而如果改用extend时
.transfer1:extend(.define);
.transfer2:extend(.define);编译输出后的CSS则为：
.transfer1,.transfer2{
color:red;
}extend还有一个比较好的特性是”all”。 比如我们定义了以”.define”很多样式,此时想用”.transfer”来拓展所有“.define”的样式，此时我们可以这样写。
.define,test{
color:red;
}
test2,.define{
background-color:green;
}
.transfer:extend(.define all);编译之后的CSS为
.define,test,
.transfer{
color:red;
}
test2,.define,
.transfer{
color:green;
}需要注意的是，当我们extend的调用的样式中，与已知样式存在冲突时（即定义相同的样式名，比如都定义了color）,则会对两个color进行“中和”,而不是一种替换另一种。
.define{
color：red;
}
.transfer{
&:extend(.define);
color:green;
}则最终“.transfer”编译出的CSS样式为red+green;输出：
.transfer{
color:red+green；//我也不知道是什么颜色，可能是棕色吧，没有去测。。。
}!importent
less中也可以使用CSS的最高优先级的！importent; 只要在调用的样式后边直接加！importent就可以了； 比如：
.define{
color:red;
}
.transfer{
.define !importent;
}
输出：
.transfer{
color:red!importent;
}4.调用函数与普通样式的区别
.define(){ color:red; } .define{ color:red; } 在less中这两种样式的定义都可以被调用，即 .transfer{ .define； .define()；都输出相同结果 } 这两种定义的区别是，以函数定义的样式不会编译在最终的CSS文件当中，而已普通的定义方式的话，就会出现在编译的文件当中，比如我们现在在less中定义一个.define{color:red}的类，在“.transfer”中调用它。
本次是在webpack的环境下做的测试，其中main.less为要编译的文件，bundle.js为输出文件，我把js和css都输出在了bundle.js文件中。 之后我们在编译好的bundle.js中查找.define
.define出现在输出文件中。 而如果我们以
.define(){
color:red;
}来定义的话，以同样步骤去查找.define，即
级果为：
（定义名称取得不太好。。。那三个都是其他地方的undefined。。。） 此时“.define”就不会出现在输出文件当中了。
@import
@import与其他地方的用法一样，就是将一个文件引入到本文件当中。 在less中，@import有以下集中参数可选： reference: use a Less file but do not output it//只做参考不会将文件编译出来。 inline: include the source file in the output but do not process it less: treat the file as a Less file, no matter what the file extension css: treat the file as a CSS file, no matter what the file extension once: only include the file once (this is default behavior) multiple: include the file multiple times optional: continue compiling when file is not found
在@import时，如果文件不加后缀 默认以less文件编译。 即 @import “library” == @import “library.less”。
when
在less中，“when”与其他语言一样，作为条件判断。
.define(@condition) when (@condition<= 100) and (@condition>=50){ color:red; }
loop
1.loop利用when进行循环。 根据索引，变量可选择@{name} ，可以生成新的样式命名。
.loop-test(4);
.loop-test(@n,@i:1) when (@i<=@n){
.index-@{i}{
width:@i*100/@n
}
.loop-test(@n,(@i+1))
}输出结果为：
.column-1 {
width: 25%;
}
.column-2 {
width: 50%;
}
.column-3 {
width: 75%;
}
.column-4 {
width: 100%;
}5.其他
除了以上的语言特性，less中还有很多内置的函数，比如default()函数，通常可以这样用：
.define(1){
color:red
}
.define(2){
color:green;
}
.define(@x) when (default()){
color:@x;
}//在@x不是1，2值的时候默认执行的函数，相当于把1,2这两个常用的样式提前定义了，之后在匹配其他的。还有很多快速处理颜色、常用的数学函数，在less当中都可以使用，本文就不着重介绍了。
6.总结
本文主要参考less中文网（http://less.bootcss.com/）上的内容，将其中自己常用到的知识点做了下简单的小结，好多知识点没有谈到，写的也比较混乱，大都是参考之前自己常用的东西，想到一点写一点，一定会存在很多问题，待努力。