共计 4032 个字符，预计需要花费 11 分钟才能阅读完成。
Less 和 CSS 的区别
HTML 和 CSS 不属于编程语言而是属于标记语言, 很难像 JS 一样定义变量、编写方法、实现模块化开发等。LESS 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。使用 LESS 基本上按照这样的步骤：编写 LESS 代码，使用 NODE、JS 或者是其他的工具把编写的 LESS 代码编译成我们平时看到的 CSS 代码(因为浏览器是无法解析 LESS 的语法的，所以编写完成的 LESS 代码需要进行编译)。
Less 叫做预编译 css, 写好的 less 代码浏览器是不能直接渲染的，需要我们把它编译成为能渲染的 css 才可以。
编译 Less
开发环境中 在开发环境下，我们一般都通过导入 less 插件来随时编译 less 代码。
// 注意 rel=”stylesheet/less” 中必须加上 less
<link rel=”stylesheet/less” href=”./css/1.less”>
<script src=”./css/less-2.5.3.min.js”></script>
生产环境中
由于每一次加载页面都需要导入 LESS 插件，并且把 LESS 文件重新编译为 CSS，很消耗性能，导致页面打开速度变慢。所以在生产环境中，我们需要事前把 LESS 文件编译为正常的 CSS 后，在相应文件中引入，以后用户访问的都是编译好的 CSS，为不是拿 LESS 现编译的。生产环境下，我们需要事先把 LESS 编译成 CSS 方法：1)使用 Node 编译
这种方式是目前项目中最常用的方式, 它是把我们的 LESS 文件编译成 CSS 文件，我们项目中直接的引入 CSS 文件即可.
(1) 安装 node
(2) 把 LESS 模块安装到全局 NODE 环境中
npm install less -g
(3) 使用命令进行编译
//-> 把 styles.less 文件编译成 styles.css 文件(如果没有这个 CSS 文件自己会创建)
lessc styles.less styles.css
//-> 编译完成的 CSS 文件是经过压缩的
lessc styles.less styles.min.css - x 或者 –compress
如果你想要更牛 X 的压缩, 还可以自己单独的设定, 下面我们使用–clean-css。这个需要提前的安装 less-plugin-clean-css 模块才可以。
//-> 安装 less-plugin-clean-css
npm install -g less-plugin-clean-css
//-> 安装成功后就可以使用它压缩了
lessc –clean-css styles.less styles.min.css
2)使用编译工具(less 在线编译)
目前常用的编译工具有：Koala(据说目前最流行的)、在线编译(http://tool.oschina.net/less)、SimpLESS 等。
Less 的基本语法
less 中的变量 和 JS 中的变量一样，只是 LESS 的变量定义不是使用 VAR 而是使用 @。
// 用变量存储公用的属性值
@shadowColor: #000;
.inner {
box-shadow: 0 0 10px 0 @shadowColor;
}
// 用变量存储公用的 URL、选择器
@selector: box;
@bgImg: “../img”;
@property: color;
@name: “fung”;
//->LESS 代码
.@{selector} {
width: 100px;
height: 100px;
@{property}: #000;
background: url(“@{bgImg}/test.png”);
&:after {
display: block;
content: @@var;
}
}
混合(Mixins) 所谓的混合其实是把某个选择器中的样式拷贝一份拿过来使用
//->LESS 代码
.public {
width: 100px;
height: 100px;
}
nav ul {
.public;
list-style: none;
}
//-> 编译为 CSS 的结果
.public {
width: 100px;
height: 100px;
}
nav ul {
width: 100px;
height: 100px;
list-style: none;
}
我们发现其实 nav ul 是把 public 中设定的样式属性值 copy 了一份到自己的样式中。如果你想在编译完成的结果中不输出 public 这个样式的结果，只需要按照下述的代码编写即可：
//->LESS 代码
.public() {//-> 在选择器后面加上 () 就可以不编译这个样式了
width: 100px;
height: 100px;
}
nav ul {
.public;
list-style: none;
}
//-> 编译为 CSS 的结果
nav ul {
width: 100px;
height: 100px;
list-style: none;
}
3.extend
虽然在上述的案例中，nav ul 把 public 中的样式继承了过来，但是原理却是把代码 copy 一份过来，这样编译后的 CSS 中依然会存留大量的冗余 CSS 代码，为了避免这一点，我们可以使用 extend 伪类来实现样式的继承使用。
“`
//->LESS 代码
.public {
width: 100px;
height: 100px;
}
nav ul {
&:extend(.public);
list-style: none;
}
//-> 编译为 CSS 的结果
.public, nav ul {
width: 100px;
height: 100px;
}
nav ul {
list-style: none;
}
“`
或者
“`
//->LESS 代码
.public {
width: 100px;
height: 100px;
}
nav ul:extend(.public) {
list-style: none;
}
//-> 编译为 CSS 的结果和第一种写法一样
“`
4. 命名空间和作用域
在 LESS 中定义了命名空间就创建了一个私有的作用域，在这个私有作用域中使用的变量都是先看一下自己作用域中有没有，没有的话，在向上一级查找（类似于 JS 的作用域链）
“`
//->LESS 代码
@color: #ccc;
.box {
@color: #eee;
.gray {
color: @color;
}
}
.box2 {
.gray {
color: @color;
}
}
//-> 编译为 CSS 的结果
.box .gray {
color: #eee;
}
.box2 .gray {
color: #ccc;
}
“`
5.!important 在调用的混合集后面追加 !important 关键字，可以使混合集里面的所有属性都继承 !important.
//->LESS 代码
@color: #ccc;
.box {
@color: #eee;
.gray {
color: @color;
}
}
nav ul {
.box !important;
}
//-> 编译为 CSS 的结果
.box .gray {
color: #eee;
}
nav ul .gray {
color: #eee !important;
}
6. 函数如同 JS 一样，LESS 也可以向函数一样设定形参数，这个技巧在我们的项目中会被经常的使用到，例如：处理 CSS3 的兼容问题
//->LESS 代码
.transition(@property:all;@duration:1s;@function:linear;@delay:0s;) {
-webkit-transition: @property @duration @function @delay;
-moz-transition: @property @duration @function @delay;
-ms-transition: @property @duration @function @delay;
-o-transition: @property @duration @function @delay;
transition: @property @duration @function @delay;
}
.box1 {
.transition;
}
.box2 {
.transition(@duration: 2s);
}
.box3 {
.transition(@duration: 2s; @property: width;);
}
//-> 编译为 CSS 的结果
.box1 {
-webkit-transition: all 1s linear 0s;
-moz-transition: all 1s linear 0s;
-ms-transition: all 1s linear 0s;
-o-transition: all 1s linear 0s;
transition: all 1s linear 0s;
}
.box2 {
-webkit-transition: all 2s linear 0s;
-moz-transition: all 2s linear 0s;
-ms-transition: all 2s linear 0s;
-o-transition: all 2s linear 0s;
transition: all 2s linear 0s;
}
.box3 {
-webkit-transition: width 2s linear 0s;
-moz-transition: width 2s linear 0s;
-ms-transition: width 2s linear 0s;
-o-transition: width 2s linear 0s;
transition: width 2s linear 0s;
}
此外我们需要值得注意的是，LESS 中也有 arguments。
//->LESS 代码
.transition(@property:all;@duration:1s;@function:linear;@delay:0s;) {
-webkit-transition: @arguments;
transition: @arguments;
}
.box1 {
.transition;
}
//-> 编译为 CSS 的结果
.box1 {
-webkit-transition: all 1s linear 0s;
transition: all 1s linear 0s;
}
