LESS 是一种 CSS 预处理器，它为前端开发者提供了强大的工具和语法扩展，使得 CSS 在结构、样式和可维护性等方面都得到了极大的提升。其中，变量、计算、mixin 是 LESS 中最为核心的特性，它们可以大幅度提高前端开发的效率和代码质量。本文将对 LESS 的这三个特性进行详细介绍，并提供一些实际的应用举例。
变量
LESS 变量是一种声明了一个标识符并将其与一个特定值关联的语言特性。这意味着我们可以创建一个变量，并在后面的代码中引用它，而不需要在每个实例中替换掉每一个值。这种方式可以避免在代码中重复使用相同的样式，提高了代码的可读性和可维护性。
变量的声明方式为 @variable: value;，其中 @ 表示这是一个变量的声明，variable 是变量名，value 是变量的值。这和在 CSS 中使用变量的方式非常相似，但会使得编写代码更加的方便，如下所示：
@bg-color: #f0f0f0;
@text-color: #333;
#content {
background-color: @bg-color;
color: @text-color;
}从上面的代码中可以看出，我们声明了两个LESS变量 @bg-color 和 @text-color。在 CSS 中，我们需要在每个应用背景颜色的位置上定义一个颜色值，但是由于 @bg-color 可以被用作特定颜色的变量值，所以我们可以大大减少样式代码的重复，提高可维护性。
计算
CSS 中没有计算的功能。这是 LESS 另外一个重要的特性。使用 LESS，我们可以在带有计算性质的 CSS 属性中加入算术表达式。这对于单元素的响应式宽度计算、 字体大小、布局和位置定位等方面非常有用。使用 LESS 中的计算，可以使得我们的样式表代码变得更加灵活和可扩展。
LESS 中的计算符号如下：
+: 加法-: 减法*: 乘法/: 除法%: 模数
举个例子：
-- -------------------- ---- ------- ------- ------ ------- - ------ ------- - --- - ----- - ------ ------- - ---- -
上述代码中的 #header 选择器在继承其基本的 300px 宽度基础上，将其扩大了一倍。相应地，#menu 选择器在基础宽度上增加了50px 给 .width 使用。
Mixin
Mixin 这个词的中文翻译是“混入”，它是 LESS 的复用特性。Mixin 让我们可以扩展和复用样式，就像通过面向对象的方式在 JavaScript 或其他语言中复用代码一样。Mixin 是一段函数代码，允许我们定义一组通用的 CSS 样式，在需要时重复使用，而不需要在样式表的每个元素中都写一遍。通过允许变量、参数和条件语句的使用，Mixin 还可以编写高度动态的通用样式。Mixin 是 LESS 中最强大和最重要的特性之一，并已 成为 HTML/CSS 开发中的标准。
Mixin 的语法是以 . 或 # 开头，后跟一组花括号，而括号中定义了 CSS 样式属性。在定义 Mixin 时，我们可以传入变量，为了更好的说明，下面是一个详情的例子：
.set-para-height(@height: 100px; @margin-top: 10px;) {
height: @height;
margin-top: @margin-top;
}
.my-content {
.set-para-height(200px; 20px;);
}上面代码中我们定义了一个 Mixin，为段落内容设置高度与上边距，后在样式中，将设置断言内容为特定值。如果 .set-para-height 语句在多个样式中使用，则可以异动共用代码运用，提高代码的可重用性。
总结
变量、计算、mixin 是 LESS 中最为核心的三个特性。LESS 非常容易学习，可以在编写更少的样式代码的同时，提高代码的可读性和可维护性。此外， LESS 在设计上允许我们轻松地使用修改器类（如 hover）、按屏幕尺寸或模式化的 CSS 偏差，这为我们在开发各种类型的应用程序时提供了非常强大的工具。 LESS 的学习和使用有助于提高前端的效率、代码的可读性和可维护性。随着对这些特性和 LESS 库的深入理解，我们可以编写出更高效，更灵活和更维护的样式表，为用户带来更好的 Web 使用体验。
参考文献
- http://lesscss.org/
- https://developers.google.com/web/fundamentals/design-and-ui/css-preprocessors
- https://www.toptal.com/front-end/css-preprocessors-css-less-sass-stylus
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65a7be01add4f0e0ff0e2e9b