Less 原理

Less 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。

Less 并没有裁剪 CSS 原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。先看一个简单的例子，Less 代码如下：

@color: #4d926f;

header {

  color: @color;

}

h2 {

  color: @color;

}

上面的例子定义了一个变量 @color，然后在选择器 header 和 h2 中使用它。编译后的CSS代码为：

header {

  color: #4d926f;

}

h2 {

  color: #4d926f;

}

从上面的例子可知，Less并没有改变CSS的语法。因此，学习 Less 非常容易，只要你了解 CSS基础，就可以很容易上手。