在前端开发中，CSS样式的编写是一个不可避免的环节。而LESS是一种CSS预处理器，它可以极大地提高CSS的编写效率以及可重复性。其中最重要的特性之一就是变量，可以让我们在编写CSS样式时避免写重复的代码，并且能够让代码更易于维护和管理。
1. 什么是变量？
LESS中的变量是用$符号来表示的，也可以称之为是一个占位符。它们在声明时被赋予一个值，该值可以是任何类型的CSS属性，比如颜色、长度、字体等等。一旦定义了变量，就可以在整个CSS文件中使用这个变量来代替它所表示的值。
2. 如何使用变量？
在Less中定义变量使用$符号，然后在其他CSS样式中可以通过变量名称来引用变量的值。下面是一个简单的例子：
-- -------------------- ---- ------- -- ---- --------------- -------- --------------- ---- -- ---- ---- - ------ --------------- -------------- --------------- -
通过定义变量，可以让我们在编写样式时更加灵活，且更加容易维护和修改代码。效果如下图所示：
3. 变量的默认值
在定义变量时，可以为其指定默认值。如果在使用变量时，没有给变量赋值，则使用默认值。例如：
-- -------------------- ---- ------- -- --------- ---------------- -------- -- ---------- ---- - ----------- ---------------- - -- ----- ------------ - ----------- ---------------- -
在上述示例中，我们定义了一个变量@btn-background并为其设置了一个默认值。在.btn样式中我们使用了这个变量，并设置了它的背景色。在.btn-default样式中，我们没有为变量@btn-background指定一个新的值，因此它将使用它的默认值。这样就能帮助我们减少重复的代码，同时保持CSS的一致性。效果如下图所示：
4. 变量的运算
变量不仅可以用于代替CSS中的属性，也可以进行数学运算。在Less中，可以使用加、减、乘、除等运算符来操作变量。例如：
-- -------------------- ---- ------- -- ---- ---------- ----- ------------ ----- -- ------ ----------- - ---------- --------- - -- ------------ ----------- - -- -
在上述示例中，我们定义了两个变量分别代表了基础字体大小和行高。然后我们使用乘法和除法运算符对变量进行数学运算以定义样式。效果如下图所示：
5. 变量的混合（Mixin）
变量的混合是另一个重要的LESS特性，它允许我们定义一组属性及其值，并在其他CSS样式中引用它。通过这种方式，我们可以使代码更加灵活、可重复使用，同时也能提高代码的可维护性。
下面是一个变量混合以及如何在其他样式中使用它的示例：
-- -------------------- ---- ------- -- -- ----- ----------- --------- ----- - ----------- -------- -------------- -------- - -- -- ----- ---- - ------------------ -
在上述示例中，我们定义了一个称为.margin-top()的Mixin。它定义了一个mValue参数和margin-top和margin-bottom样式的值。我们使用.mixin-top()在.btn样式中调用Mixin，并设置了一个新值20px作为@mValue参数的默认值。
6. 总结
Less中的变量是一种极为强大的CSS编写方式，能够提高代码的可重复性、可维护性和灵活性。与CSS原始语言相比，Less中的变量能极大地减少代码量，让CSS样式更加清晰易读。了解如何使用Less中的变量并熟练掌握其语法，可以让你从繁琐的代码片段中解放出来，让你花更多的时间去思考设计和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/664b51ddd3423812e4a38809