CSS不像其它高级语言一样支持算术运算、变量、流程控制与面向对象特性，所以CSS样式较多时会引起一些问题，如修改复杂，冗余，某些别的语言很简单的功能实现不了等。而javascript则是一种半面向对象的动态语言，有java的影子，有C的味道，中间有比其它语言多的糟粕，使用预处理办法可以解决这些问题。其中Less[les]与Sass是CSS的预处理技术，而CoffeeScript、TypeScript则是javascript的预处理技术。
1.1、概要
Less是一种动态样式语言，Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。
Less 将 CSS 赋予了动态语言的特性，如 变量， 继承， 运算， 函数。LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox)，也可以借助Node.js或者Rhino在服务端运行。 Less是一个JS库，所以他可以在客户端运行，相对Sass则必须在服务端借助Ruby运行
中文网站： https://less.bootcss.com/
英文官网： http://lesscss.org
less源码： https://github.com/cloudhead/less.js
github地址： https://github.com/less/less.js
1.2、变量
语法：@变量名:值;
1)、以@作为变量的起始标识，变量名由字母、数字、_和-组成
2)、没有先定义后使用的规定；
3)、以最后定义的值为最终值；
4)、可用于rule值、rule属性、rule属性部件、选择器、选择器部件、字符串拼接；
5)、定义时 "@变量名: 变量值;" 的形式；引用时采用 "@变量名" 或 "@{变量名}" 的形式；
6)、存在作用域，局部作用域优先级高于全局作用域。
@color: #4d926f; #header { color: @color; } #header { color: #4d926f; } @color: #253636; @color: #ff3636; //覆盖第一次的定义 #header {color: @color;} //多次反复解析 #header {color: #ff3636;}
编译后：
#header { color: #ff3636; } #header { color: #4d926f; } #header { color: #ff3636; } #header { color: #ff3636; }
1.3、解析Less
1.3.0、插件安装
a)、先安装node.js(https://nodejs.org/en/)
b)、安装less编译器
npm install less -g
c)、安装插件
d、配置
默认是正常的，如果发现Hbuilder不能自动翻译则需要配置
WebStorm中自动转译less为css：
1.3.1、在线处理
页面中直接引用less的源码，使用javascript动态翻译，这样在开发阶段非常方便，但是在运行阶段会影响效率，建议在开发阶段使用less.js在线处理，项目稳定运行时将less文件预处理。
步骤一：
下载到less.js动态处理.less文件的javascript脚本，下载地址： https://github.com/less/less.js
步骤二：
在页面中引入样式与less.js文件，如下：
<link rel="stylesheet/less" type="text/css" href="styles.less"> <script src="less.js" type="text/javascript"></script>
测试运行
示例代码：
style1.less
/*1定义变量*/ @color:red; @bgColor:lightgreen; /*定义变量color，值为red*/ .cls11{ color: @color; } @color:lightblue; /*重新定义，覆盖前面的定义，后定义的起作用*/ .cls12 { background: @bgColor; border: 2px solid @color; }
de2.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Less</title> <link rel="stylesheet/less" type="text/css" href="css/style1.less"> <script src="js/less/less.min.js" type="text/javascript"></script> </head> <body> <div id="div1" class="cls12"> Hello Less </div> </body> </html>
运行效果：
从上图可以看出less.js将style1.less文件翻译后变成了一个标准的CSS内部样式表。
1.3.2、预处理
在线处理的效率低，预处理就是将less文件先翻译成标准的CSS文件，再引入到项目中，处理的办法有许多：
方法一：使用lessc
a)、请先在电脑上安装node.js，下载地址： https://nodejs.org/en/
a)、安装lessc
使用npm（node.js package management）node.js包管理器
在命令行模式下输入安装指令：npm install less -g
使用lessc翻译less文件为css文件：
lessc styles.less 显示
lessc styles.less > styles.css 生成文件
参数 –x 普通压缩
参数 -h 帮助
-x的压缩方法已经被弃用，建议使用清理插件。
方法二：使用工具软件
能够翻译Less的工具软件有不少，这里介绍：Koala
Koala是一个开源的预处理语言图形编译工具，目前已支持Less、Sass、Compass与CoffeeScript。
功能特性：
多语言支持： 支持Less、Sass、Compass与CoffeeScript。
实时监听与编译： 在后台监听文件的变动，检测到文件被修改后将自动进行编译。
编译选项支持： 可以设置与自定义你需要的编译选项。
压缩支持： Less、Sass可直接编译生成压缩后的css代码。
错误提示： 编译中如果遇到错误，Koala将在右下角提示并显示出具体的出错地方，方便开发者快速定位。
跨平台： Windows、Mac、Linux完美支持。
安装Koala
在Koala官网根据你的系统平台下载对应的版本。Linux系统要求已安装好ruby运行环境。
下载地址： http://koala-app.com/
注意：路径中不要使用中文，切记！
方法三：使用IDE插件
如果使用Eclipse,Hbuilder,Visual Studio等开发工具可以安装插件完成自动翻译功能，这里使用HBuilder，在工具->插件下可以选择安装，如下图所示：
使用方法：
新建Less文件，保存后会自己生成对应的CSS文件。
1.4、混入(Mixins)
类似函数或宏
定义函数，@radius是参数，3px是默认值
.borderRadius(@radius:3px){
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
使用函数，带参数
#header { .borderRadius(10px); }
不带参数使用默认参数
.btn { .borderRadius}
注意：
a)、可以不使用参数 .wrap(){…} .pre{ .wrap }，也可以使用多个参数
b)、内置变量@arguments代表所有参数(运行时)的值 .boxShadow(@x:0,@y:0,@blur:1px,@color:#000){ box-shadow: @arguments; }
注意，在参数没有默认值的前提下使用@arguments调用时必须赋值，否则会导致整个页面内的less语法出错而失效。
c)、Mixins必须使用ID或者类，即#xx或.xx，否则无效。
Less示例代码：
/*混入(Mixins)*/ /*定义*/ .circle(@width:100px, @color:lightblue) { width: @width; height: @width; background: @color; border-radius: @width/2; float: left; } .boxShadow(@x:0, @y:0, @blur:1px, @color:#000) { box-shadow: @arguments; } /*调用*/ .cls21 { .circle(); /*默认值*/ } .cls22 { .circle(200px,lightgreen); /*带参数*/ .boxShadow(5px,5px); } .cls23 { .circle(300px); /*带一个参数*/ }
HTML页面：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Less</title> <link rel="stylesheet" type="text/css" href="css/style2.css" /> </head> <body> <div id="div1" class="cls21"> </div> <div id="div1" class="cls22"> </div> <div id="div1" class="cls23"> </div> </body> </html>
翻译结果：
/*调用*/ .cls21 { width: 100px; height: 100px; background: lightblue; border-radius: 50px; float: left;/*默认值*/ } .cls22 { width: 200px; height: 200px; background: lightgreen; border-radius: 100px; float: left; /*带参数*/ box-shadow: 5px 5px 1px #000; } .cls23 { width: 300px; height: 300px; background: lightblue; border-radius: 150px; float: left;/*带一个参数*/ } /*# sourceMappingURL=style2.css.map */
运行效果：
1.5、嵌套
允许将多个CSS选择器嵌套在一起，&表示当前选择器的父选择器
#header {
&.fl{ float: left; }
.mln { margin-left: 0; }
}
生成
#header.fl{float: left;}
#header .mln {margin-left: 0;}
示例：
/*嵌套*/ #parent { color: red; .sub11 { background: green; } &.sub12 { width: 100px; } .sub13 { height: 200px; .sub131 { font-size: 10px; } } }
结果：
/*嵌套*/ #parent { color: red; } #parent .sub11 { background: green; } #parent.sub12 { width: 100px; } #parent .sub13 { height: 200px; } #parent .sub13 .sub131 { font-size: 10px; }
1.6、运算
运算主要是针对任何数字、颜色、变量的操作，支持加、减、乘、除、()或者更复杂的综合运算；
@init: #111111;
@transition: @init*2;
.switchColor { color: @transition; }
算术运算示例：
/*运算*/ @base: 5%; @filler: @base * 2; @other: @base + @filler; @base-color:lightblue; .cls41{ color: #888 / 4; background-color: @base-color + #111; height: 100% / 2 + @filler; }
运行结果：
.cls41 { color: #222222; background-color: #bee9f7; height: 60%; }
1.7、函数
Less 提供了许多用于转换颜色，处理字符串和进行算术运算的函数
.lightColor{lighten(@color, 10%); }
更多函数： http://www.lesscss.net/functions/
示例：
/*函数*/ .cls51 { /*将一个资源内嵌到样式文件，如果开启了ieCompat选项，而且资源文件的体积过大，或者是在浏览器中使用，则会使用url()进行回退。如果没有指定MIME，则Node.js会使用MIME包来决定正确的MIME。*/ background: data-uri('../img/yes.gif') no-repeat; height: 20px; } .cls52 { /*增加一定数值的颜色亮度。*/ background: lighten(blue,20%); }
翻译结果：
/*函数*/ .cls51 { /*将一个资源内嵌到样式文件，如果开启了ieCompat选项，而且资源文件的体积过大，或者是在浏览器中使用，则会使用url()进行回退。如果没有指定MIME，则Node.js会使用MIME包来决定正确的MIME。*/ background: url("data:null;base64,R0lGODlhDAAMAKIAAMznjyJ6Gu732TKGFq7ZTF+nDI7JBf///yH5BAAAAAAALAAAAAAMAAwAAAM8eCdAZgQItdy7RAlXyhidBhjdEAQD1ZDHGVDQUyivMlws1d6xR6EFyKi06xgkHA8oSJhscI8mhWGJTA4JADs=") no-repeat; height: 20px; } .cls52 { /*增加一定数值的颜色亮度。*/ background: #6666ff; }
运行效果：
1.8、继承
示例代码：
/*继承*/ .animal { background-color: black; color: white; } .bear { &:extend(.animal); background-color: brown; } .mouse{ &:extend(.animal); }
翻译结果：
/*继承*/ .animal, .bear, .mouse { background-color: black; color: white; } .bear { background-color: brown; }
1.9、作用域
同一级的变量后者覆盖前者，内部变量优先级高于外部变量，变量只在同一个文件中生效。
示例：
/*作用域*/ @len:10px; .cls61{ @len:20px; height:@len; } .cls62{ width:@len; } @len:30px; .cls63{ height: @len; }
结果：
.cls61 { height: 20px; } .cls62 { width: 30px; } .cls63 { height: 30px; }
1.10、注释
示例：
/*注释*/ .cls71{ width: 100px; //单行注释，CSS中不允许单行注释，Less允许 height:100px; /* 多行注释，CSS与Less都允许 */ }
结果：
/*注释*/ .cls71 { width: 100px; height: 100px;/* 多行注释，CSS与Less都允许 */ }
1.11、循环
在Less中，混合可以调用它自身。这样，当一个混合递归调用自己，再结合Guard表达式和模式匹配这两个特性，就可以写出循环结构。
less源码：
.loop(@counter) when (@counter > 0) { .loop((@counter - 1)); // 递归调用自身 width: (10px * @counter); // 每次调用时产生的样式代码 } div { .loop(3); // 调用循环 }
生成css：
div { width: 30px; width: 20px; width: 10px; }
less源码（生成栅格系统）：
.generate-columns(5); .generate-columns(@n, @i: 1) when (@i =< @n) { .column-@{i} { width: (@i * 100% / @n); } .generate-columns(@n, (@i + 1)); }
生成css：
.column-1 { width: 20%; } .column-2 { width: 40%; } .column-3 { width: 60%; } .column-4 { width: 80%; } .column-5 { width: 100%; }
1.12、示例代码
style.less：
/*1.3、变量**/ @color: red; /*1.4、混入(Mixins)**/ .circle(@length: 100px, @color: lightblue) { width: @length; height: @length; background: @color; border-radius: @length/3; float: left; } .boxshadow(@x: 3px, @y: 3px, @blur: 3px, @color: #999) { box-shadow: @arguments; box-shadow: @x @y @blur @color; } .c1 { .circle(); /**默认参数*/ } .c2 { .circle(200px, lightgreen); /**指定所有参数*/ } .c3 { .circle(300px); /**指定部分*/ } .c4 { .circle(400px); /**指定部分*/ .boxshadow(5px, 5px, 5px, #00f); } .c5 { .circle(500px); /**指定部分*/ .boxshadow(); } /*1.5、嵌套 **/ #main { color: @color; .sub1 { width: 100px; .sub11 { background: #00f; } } &.sub2 { height: 100px; } } @color: blue; /*1.6、运算**/ @i: 10rem; @pcolor: blue; @color: #0000ff; .cls16 { width: @i+10/2; background: #000111+#111000; color: @pcolor+#00ff00; } /*1.7、函数**/ .lightColor { width: floor(2.6)px; } .bg { background: data-uri('dot2.gif'); } /*1.8、继承 **/ .animal { color: black; background: white; } .duck { &:extend(.animal); color: yellow; } .tduck { &:extend(.duck); min-height: 100px; } .pig { &:extend(.animal); } /*1.9、作用域*/ @len: 10px; .cls61 { @len: 20px; height: @len; } @len: 30px; .cls62 { width: @len; } @len: 40px; .cls63 { height: @len; } @len: 50px; /*1.10、注释**/ .c { width: 100px; //宽100px } /*1.11、循环*/ .loop(@counter) when (@counter > 0) { width: (10px * @counter); // 每次调用时产生的样式代码 .loop((@counter - 1)); // 递归调用自身 } div { .loop(3); // 调用循环 } .generate-columns(5); .generate-columns(@n, @i: 1) when (@i =< @n) { .column-@{i} { width: (@i * 100% / @n); } .generate-columns(@n, (@i + 1)); }