LESS 是一种动态样式表语言，它扩展了 CSS，并且能够减轻样式表的维护负担。其中，多种语法糖能够进一步提高开发效率和代码可读性。本文将介绍 LESS 中几种常见的语法糖及其应用场景。
变量
变量是一种将值存储在内存中以供重复使用的机制。也就是说，我们可以将某一个值定义为一个变量，并在接下来的样式表中多次引用这个变量来避免重复。在 LESS 中，变量可以使用 @ 符号进行定义，如下所示：
@primary-color: #0070f3;
button {
color: @primary-color;
background-color: lighten(@primary-color, 10%);
}在上面的代码中，我们定义了一个名为 @primary-color 的变量，其值为 #0070f3。在 button 中，我们使用了这个变量作为颜色属性的值，并另外通过 lighten 函数将这个颜色值进行了亮度增强。通过使用变量，我们可以避免重复定义颜色值，并方便地进行统一修改。
混合（MIXIN）
混合是一种将多个样式属性打包成一个单一规则的机制。通过引用混合，我们可以将这些属性应用于任何选择器，从而避免了重复编写类似的规则。在 LESS 中，混合可以使用 .mixin 而非 @mixin 的方式定义，如下所示：
-- -------------------- ---- ------- ------------- -- ------- -- -------- -- ------ -- - ----------- ----- ------------- ------- -------------- -------- ------------ ------ - ---- - -------------- -
在上面的代码中，我们定义了一个名为 .margin 的混合，其包含四个属性：@top、@right、@bottom 和 @left。这个混合会在应用于 .box 类时将四个属性应用到其中，并将所有的 margin 都设置为 10px。使用混合，我们可以避免在多个选择器中重复编写类似规则，使代码更具可读性和复用性。
带参数的混合
除了上面的非参数混合外，LESS 中还支持带参数的混合。这种混合可以接受多个参数，并用于指定不同的属性样式。在 LESS 中，带参数的混合可以使用类似函数的语法进行定义，如下所示：
-- -------------------- ---- ------- --------------- - -------- ------ - -------------- ------ ------ - ------- ----- ------ - ---- - --------------- ------------- -
在上面的代码中，我们定义了两个带参数的混合：.padding 和 .border。我们可以在使用时动态指定这些参数的值，从而使这些混合可以应用于不同的需求场景。例如，我们在 .box 类中分别使用这两个混合并指定了不同的参数值。这样一来，我们可以在不同的选择器中重用这两个混合，而不必重复编写相似的 CSS 规则。
嵌套（NESTING）
LESS 中嵌套是一种将子元素样式作为父元素样式的属性的方式。通过嵌套，我们可以更加清晰地表达出元素之间的层次结构，并且避免了一些不必要的冗余样式代码。以下是一个示例：
-- -------------------- ---- -------
------- -
----------- -----
-- -
------- --
-------- --
----------- -----
-- -
-------- -------------
- -
------ -----
---------------- -----
-
-
-
-在上面的代码中，我们使用了嵌套来表示 .navbar 元素内的 ul、li 和 a 元素之间的层次结构。通过这种方式，我们可以更加清晰地展现元素间的层次关系，提高代码可读性。
运算
在 LESS 中，我们可以使用运算符（+、-、*、/）来对数值进行计算，并将计算结果应用到需要的属性上。以下是一个示例：
@width: 200px;
.box {
width: @width / 2;
height: @width * 2;
background-color: #f5f5f5;
}
在上面的代码中，我们使用了两个运算符（/ 和 *）来计算 width 和 height 的值，并将计算结果应用到两个属性中。通过这种方式，我们可以更加方便地进行数值计算，避免出现一些错误。
综上所述，LESS 中常见的语法糖包括变量、混合、带参数的混合、嵌套和数值运算。仔细阅读并学习掌握这些语法糖，有助于提高您的开发效率和代码质量。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67d82558a941bf7134e8eaf7