Less 原理

Posted 2020-10-15 Web先生的博客

Less 原理

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

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

1. @color: #4d926f;
2. header {
3.   color: @color;
4. }
5. h2 {
6.   color: @color;
7. }

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

1. header {
2.   color: #4d926f;
3. }
4. h2 {
5.   color: #4d926f;
6. }

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