LESS 是一个比 CSS 更高级的预处理器，它提供了一些强大的功能，例如变量、Mixin、嵌套规则和操作符等，这些功能可以让开发人员更快、更简单地编写 CSS 。本文将介绍如何在 LESS 中创建更好的变量和 Mixin。
变量
LESS 变量是一个表示值的符号，它们可以被用来代替一些重复的数值、颜色或字体等。通过使用变量，您可以在 LESS 文件中定义一些基本样式，例如字体类型、行高、边框宽度等，并在整个项目中使用它们。以下是一个定义 LESS 变量的小例子：
@font-stack: Arial, sans-serif;
@primary-color: #007bff;
body {
font-family: @font-stack;
color: @primary-color;
}在上述代码中，@font-stack 变量定义了一个字体类型，@primary-color 变量定义了一个颜色，并在 body 元素中使用这两个变量。这样，如果您想要更改字体或颜色，只需要更改这个变量，而不必去寻找每个具体的地方做修改。
除了简单的变量，LESS 还支持变量的运算操作和嵌套。在下面的示例中，我们使用变量来定义一个元素的宽度，并进行运算操作：
-- -------------------- ---- ------- ------- ------ ---------- - ------ ------- - -------- - ------ ------ - -- -- ----- ------------ ------- - -- - ----- -- ---- -
在上述代码中，我们定义了一个名为 @width 的变量，然后将它用在 .container 中。在 .element 中，我们使用了 @width 变量进行数值计算。有了这些变量，我们就可以避免一些重复的固定数字的重复写入。
Mixin
Mixin 是一种定义的一系列 CSS 样式的方法。使用 Mixin，您可以在写 CSS 时避免一些冗长的代码。下面是一个简单的 Mixin 案例：
.border-radius(@radius: 5px) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}我们用 @radius 声明了一个变量，该 Mixin 会定义一组圆角边框共同样式，而 @radius 变量是可选的，也就是说，如果我们不指定它，会使用默认值5px，友善的默认设置通常可以让代码更易于阅读。
为了使用这个 Mixin，我们可以像下面这样评估它：
-- -------------------- ---- ------- ---- - ----------------- ---- --------------- - ---------- - ----------------- ----- -------------------- -
在上述代码中，我们分别将 .box 和 .box-small 上的 background-color 属性设置为不同的颜色，并使用 border-radius Mixin。在 .box-small Mixin 中，我们向 @radius 传递了一个参数，这个参数被用作圆角化处理的半径。
总结
LESS 提供了一些非常方便的工具，如变量和 mixin，来使开发人员更加快速高效地编写 CSS。变量可以用于存储经常使用的值，Mixin 则可以用于简化冗长的样式表。通过使用 LESS，您可以将样式文件可读性更强、更好维护、易于更新，因此使用它的代价也是比较值得的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e9708ff6b2d6eab34ba250