1、 什么是LESS
LESSCSS是一种动态样式语言，属于CSS预处理语言的一种，它使用类似CSS的语法，为CSS的赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护。
LESSCSS可以在多种语言、环境中使用，包括浏览器端、桌面客户端、服务端。
LESSCSS是一种由Alexis Sellier设计的动态层叠样式表语言。受Sass所影响，同时也影响了Sass的新语法：SCSS。[1]
LESSCSS是开源的，其第一个版本由Ruby写成，但在后续的版本当中，Ruby逐渐被复用为JavaScript。受益于JavaScript，LESS可以在客户端上运行（IE6+、Webkit、Firefox），也可以在服务端运行（Node.js、Rhino）。
2、目的
学习笔记，里边加了一些体会。同时也希望以后不用去参照官方文档了。中文官网、英文官网。
3、语法：
3.1、变量（Variables）
其实更应该称为常量。因为只能取最后一次的赋值。
语法规则：
@变量名：值;
值可以是css属性值，也可以是其他变量
3.1.1 css属性值
@backColor: yellow;.a { background-color: @backColor;}@backColor: blue;.b { background-color: @backColor;} 编译后：
.a { background-color: #0000ff;}.b { background-color: #0000ff;} 从编译后的结果可以看出来，只取变量的最后一次赋值结果。
@backColor: blue;3.1.2 变量名做作为变量
@com: color;@color: #111;#header { background-color: @@com + 5 * 2; color: @color;} 编译后：
#header { background-color: #1b1b1b; color: #111111;} 注： 仅支持@@，不支持>2@。 3.1.3 作用域（scope）
@color: red;#header { @color: white; .a { color: @color; // white }}.b { color: @color; // red } 编译后：
#header .a { color: #ffffff;}.b { color: #ff0000;} 可以看出来，LESS中变量作用域处理方式和js一致，采用链式作用域方式。至于上面的嵌套写法，先不用理解，后面会说到。
用法：
1、统一的样式修改（当然没有LESS之前，我们也可以通过规范进行实现）；
2、四则运算（ Operations ），虽然仅仅四则，但是已经可以完成大多数功能了；
3、和混合（ Mixins ）结合使用，你像使用函数一下使用他；
4、和js相同的链式作用域，前端工程师非常容易理解。
3.2 混合（Mixins）
我把他分为两种形式： 函数和复用 。
Bad smell（代码的坏味道）中第一条一般就是Duplicated Code（重复代码）。如何解决？就是代码封装。Mixins就是这样一个作用。
函数：
.c(@bg: red) { background-color: @bg; width: 100px; height: 200px;}@bgc: yellow;.a { .c(@bgc);}@bgColor: @bgc + #111;.b { .c(@bgColor);}.d { .c();} 编译之后的代码：
.a { background-color: #ffff00; width: 100px; height: 200px;}.b { background-color: #ffff11; width: 100px; height: 200px;}.d { background-color: #ff0000; width: 100px; height: 200px;} 注： 编译之后没有.c相关内容。 @arguments
这个写法借签了js的函数参数。一般用于一些简写方式：
.boxShadow(@x:0,@y:0,@blur:1px,@color:#000){ -moz-box-shadow: @arguments; -webkit-box-shadow: @arguments; box-shadow: @arguments;}#header { .boxShadow(2px,2px,3px,#f36);} 编译后：
#header { -moz-box-shadow: 2px 2px 3px #ff3366; -webkit-box-shadow: 2px 2px 3px #ff3366; box-shadow: 2px 2px 3px #ff3366;} 复用：
.d { .e;}.e { position: absolute;}#f { position: relative;;}.m { #f;} 编译之后
.d { position: absolute;}.e { position: absolute;}#f { position: relative;}.m { position: relative;} 发现没有？.e和#f内容都存在。
注： class, id 属性集都可以以同样的方式复用。
“函数”和“复用”区别：
1、前者可以传参；
2、前者编译之后不存在，后者依然存在。
用法：
1、代码封装；
2、同变量一同，像函数一样使用，封装之后我们可以进行统一的样式修改；
3、样式复用，主要针对“复用”。
3.3 运算符（Operations）
目前仅支持加、减、乘、除四则运算，主要针对数字、颜色、变量的操作。
@baseWith: 100px;@baseHeight: 50px;@baseColor: #333;.a { height: @baseHeight + 300; min-width: @baseWith - @baseHeight; width: @baseWith * 3; color: @baseColor / 3;} 编译后：
.a { height: 350px; min-width: 50px; width: 300px; color: #111111;} 可以使用（）改变运算的先后顺序
@com: 25px;#header { width: @com + 5 * 2; height: (@com + 5 ) * 2;} 编译后：
#header { width: 35px; height: 60px;} 3.4 功能函数（Functions）
主要针对color的处理。提供如下函数：
lighten(@color, 10%); // return a color which is 10% *lighter* than @colordarken(@color, 10%); // return a color which is 10% *darker* than @colorsaturate(@color, 10%); // return a color 10% *more* saturated than @colordesaturate(@color, 10%); // return a color 10% *less* saturated than @colorfadein(@color, 10%); // return a color 10% *less* transparent than @colorfadeout(@color, 10%); // return a color 10% *more* transparent than @colorspin(@color, 10); // return a color with a 10 degree larger in hue than @colorspin(@color, -10); // return a color with a 10 degree smaller hue than @color
本人使用的不是很多，想了解更详细的新可以参考官网，或者这里。
3.5 嵌套规则（Nested Rules）
为了和上面做区分，同时带入一个新功能，以一个新例子开始。html代码如下：
hanyangecho
我的世界
查看更多关于Less用法指南_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did104843