LESS 中使用变量控制多个 class 样式
在前端开发过程中，我们经常需要定义多个相似的 class 样式，这时候如果每个 class 都单独定义样式，会使代码重复度极高且很难维护。为了让样式的定义更加简便，我们可以使用 LESS 中的变量来控制多个 class 样式，从而减少代码量、易于维护。
为什么要使用变量
使用变量，不仅可以将相同的属性值进行统一管理，也可以避免在修改某个样式时，需要在每个 class 中进行修改的麻烦。
如何使用变量
在 LESS 中，使用 @ 变量名 来定义一个变量，然后在样式类中使用该变量。举个例子：
-- -------------------- ---- ------- --------------- -------- ------- - ------ --------------- - ------------ - ----------------- --------------- -
以上代码中，我们定义了一个 @primary-color 变量，并将其赋值为 #008CBA，然后在 button 和 btn-default 样式类中，都使用该颜色变量。如果我们需要更改这个 primary-color 颜色值，只需要修改变量定义，所有使用该颜色变量的样式类，颜色都会同步更改。
同样的道理，我们可以定义一个变量用于控制字体大小，再将其应用到多个样式类中：
-- -------------------- ---- ------- ----------- ----- ------ - ---------- ----------- - ---------- - ---------- ---------- - ---- - -------- - ---------- ---------- - ---- -
在上述代码中，我们定义了一个 @font-size 变量用于控制字体大小，然后针对不同的样式类，分别使用了 @font-size、@font-size - 2px、@font-size + 2px。这样定义样式，不仅便于维护，同时也避免了字体大小不一致的问题。
高级应用
除了使用简单变量外，我们还可以使用一些高级语法来扩展变量的用途。
变量作为选择器名
如果我们需要让不同的选择器使用相同的属性，可以将变量作为选择器名来使用。例如：
@selector: ".primary-button";
@{selector} {
background-color: #008CBA;
color: #fff;
}在上述代码中，我们首先定义了一个 @selector 变量，变量值为 .primary-button。然后在样式类中，使用了 @{selector} 的语法，将 @selector 的变量值作为选择器名来使用。这样便可以统一管理多个选择器的样式。
变量相互引用
变量还可以相互引用，例如我们可以定义一个 @bg-color 变量，然后使用 darken() 函数来使其更深：
-- -------------------- ---- ------- ---------- -------- ----------------- ----------------- ----- ------- - ----------------- ---------- - -------------- - ----------------- ----------------- -
在上述代码中，我们定义了 @bg-color 和 @bg-color-darken 两个变量。@bg-color 变量赋值为 #008CBA，@bg-color-darken 变量使用了 darken() 函数，将 @bg-color 颜色值加深 10%。然后在 .button 和 .button-darken 样式类中，分别使用了 @bg-color 和 @bg-color-darken 变量。
总结
使用 LESS 中的变量，可以减少代码冗余，也可以更加方便的管理样式。在实际开发过程中，我们应该充分利用 LESS 中的变量语法，并结合高级语法来设计更加高效、易于维护的样式表。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d0b2e6b5eee0b5257a8038