GET LESS：变量、计算、mixin-JavaScript中文网-JavaScript教程资源分享门户

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 中的计算符号如下：

+: 加法
-: 减法
*: 乘法
/: 除法
%: 模数

举个例子：

@width: 300px;

#header {
  width: (@width * 2);
}

#menu {
  width: (@width + 50);
}

上述代码中的 #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 使用体验。

参考文献

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65a7be01add4f0e0ff0e2e9b

GET LESS：变量、计算、mixin

变量

计算

Mixin

总结

参考文献

纠错反馈