共计 3642 个字符，预计需要花费 10 分钟才能阅读完成。
CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。
简单来说，CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。
CSS 预处理器的技术现在已经很成熟了，而且也出现了各种不同的 CSS 预处理器语言，但是呢不可能一一列出，面面俱到，这篇文章呢，主要是介绍一下比较常见的 CSS 预处理器语言之一之 Less 初体验。
Less
Alexis Sellier 与 2009 年设计
LESS 的第一个版本是用 Ruby 编写的，在后来的版本中，它被 JavaScript 替代了。
Less 是一门 CSS 预处理语言，扩充了 css 语言，增加了诸如变量、混合（mixin）、函数等功能，让 css 更易于维护，方便制作主题。
关于 Less 的基本使用，我们需要从嵌套、混合、变量、函数以及引入这几个方面来一一认识。
1 Less 的安装使用和编译：
-
引用 Less，全局安装
npm install less -g -
新建一个 index.html 文件和 main.less，在 index.html 中引入 main.css，然后输入下面语句自动编译成 main.css
lessc main.less main.css
2 Less 的基本语法
-
嵌套
在 css 中父子元素的写法通常如下：.container {padding: 0;} .container .header {background-color: red;}通过 Less 写法如下，父子嵌套关系一目了然。也就是下面的代码编译就成了上面的 css 语法。
.container { padding: 0; .header {background-color: red;} } -
伪类
伪类的写法，在 css 中写法如下：#header :after { content: " "; display: block; font-size: 0; height: 0; clear: both; visibility: hidden; }在 less 引入可以用一个符号 & 代替主类 #header；& 就代表了上一层的类名。
#header { &:after { content: " "; display: block; font-size: 0; height: 0; clear: both; visibility: hidden; } } -
变量
也就是说定义一个公共的变量不用多次重复编写相同的代码；比如将三个 div 的背景颜色改成蓝色，我们只需要如下所示：@background:blue;- less 就是 js 的写法来写 css
- 使用 @符号定义变量
- @变量名 看成是一个字符串
- 变量可以作为样式属性值：background-color：@color；
-
也可以作为类名，我们需要把 {} 包起来：如下代码.@classname 表示的就是 .main。
.@{classname}{background-color：@color;} @classname:main; @color:red;
-
函数
-
使用 $ lessc func.less 进行转译 func.css 文件
.border-radius(@radius) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; } #header {.border-radius(4px); } .button {.border-radius(6px); } 转化成了 css 如下: #header { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .button { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } -
函数的参数允许设置默认值
.border-radius(@radius: 10px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; } #header{.border-radius(); } .button{.border-radius(); } 编译 css 后的代码为：#header { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .button { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } -
函数有多个参数时用分号隔开，调用时就是通过变量名称，而不是位置
.mixin(@radius:10px;@color：green;) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; color:@color; } #header{.mixin(@color:green); } .button{.mixin(@color:green); } 编译成 css 为：#header{ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; color:green; } .button{ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; color:green; } -
Less 内置函数（自己本身存在的函数）
1 escape
2 percentage（百分比）.mixin(@radius:10px;@color：green;) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; color:@color; width:percentage(.5); } #header{.mixin(@color:green); } .button{.mixin(@color:green); } 编译成 css 为：#header{ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; color:green; width:50%; } .button{ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; color:green; width:50%; }3 convert（单位的转换）
-
-
混 合
-
抽取公共类，例如下面的 css 代码可以用 less 这样编写
在 css 中的代码：#header a { color: #111; border-top: solid 1px #595959; border-bottom: solid 2px #595959; } #header span { height: 16px; border-top: solid 1px #595959; border-bottom: solid 2px #595959; } #header p { color: red; border-top: solid 1px #595959; border-bottom: solid 2px #595959; } .borde_style { border-top: solid 1px #595959; border-bottom: solid 2px #595959; } 在 less 中我们可以定义一个公共的样式名 border-style，然后编译出来的 css 就是上面的 css 代码：.borde_style { border-top: solid 1px #595959; border-bottom: solid 2px #595959; } #header a { color: #111; .borde_style; } #header span { height: 16px; .borde_style; } #header p { color: red; .borde_style();}
-
3 Less 的引入
比如新建一个 one.less，@import‘./main.less’；然后编译一下，我们会发现编译出来的。one.css 里面就包含了 main.less 里面的样式内容。
4 Less 的优势与劣势
优点：
- 开发速度提升
- 代码优化效率提高（对开发者而言）
- 代码更通俗易懂（对开发者而言）
- 代码更干净，优美
- 维护简单便捷
- 功能更多更强
缺点：
- 功能上比 Sass 弱，比如对象、循环和判断
- 生态环境略逊于 Sass(2006)
- 需要多一个编译器来重新编译一次 CSS 代码，也就是给浏览器多了一道工序，网页显示的速度会减慢
