LESS CSS是一个非常强大的CSS预处理器，其主要优势就是使得CSS样式表变得更加易于管理和维护。而减少CSS代码的冗余、提高CSS代码的复用程度是从中获得优势的两个大途径。
在LESS中，mixins和变量是我们可以使用的两个非常强大的特性。正确地使用它们可以大幅提高CSS代码的可读性和可维护性。
Mixins
Mixin是一种允许复用一组CSS属性集合的机制，类似于JavaScript中的函数。通过使用mixin，我们可以将一组CSS属性集合定义为一个独立的单位，并在需要的地方进行调用。
在LESS中，定义一个mixin非常简单，只需使用@mixin关键字即可。例如：
-- -------------------- ---- ------- ------ ------------- --------- - ---------------------- -------- -------------- -------- - ---- - ----------------- ---- -------- ------------- ------ -
上面的代码定义了一个名为border-radius的mixin，它定义了两个CSS属性：-webkit-border-radius和border-radius，并将它们放入了一个名为.box的CSS选择器中。在.box中，我们使用@include关键字来调用mixin。参数@radius用来表示圆角半径。
使用mixin可以简化CSS的重复代码，减少代码量。如果我们需要更改圆角半径，只需要在mixin中更改一次即可。
变量
变量是LESS中的另一个非常有用的功能。使用变量可以避免重复的值在多个位置定义，而且如果需要更改这些值，在所有的地方进行修改会非常方便。
在LESS中，定义变量使用@符号，例如：
@color: #007FFF;
.header {
background-color: @color;
color: white;
}上面的代码中定义了一个变量@color，它表示蓝色，然后在CSS选择器.header中使用。如果需要更改颜色，只需要更改@color变量即可。这就极大地方便了代码的维护。
不仅仅如此，@color变量还可以被用作计算和拼接。例如：
-- -------------------- ---- ------- --------- ----- ---------------- -------- - -- -------------- -------- - -- ------- - -------- ---------------- - ----- - -------- -------------- -
在上面的代码中，我们定义了一个名为@padding的变量. 然后我们通过计算，定义了@header-padding和@body-padding这两个变量。在.header和.body中使用了新定义的@header-padding和@body-padding变量。这种方法可以避免在多处重复指定具有相同值的内边距。
结论
使用mixin和变量是LESS中极其强大的工具，它们可以大大简化我们的CSS编写过程，并减少我们的CSS代码的冗余。同时，使用变量可以帮助我们快速更改属性的值，并且在所有的地方进行修改会非常方便。
代码示例
-- -------------------- ---- ------- -- -- ----- ------ ---------------------- ---- - ---------------------- -------- -------------- -------- - -- ---- ----------- ----- -- -- ----- --- ---- - ---------- ----------- ----------------- ----- -------- -------------------- - --------- - ----- ------ ---- ------ ----- -
上面的代码中，我们定义了一个名为border-radius的mixin，它定义了两个CSS属性：-webkit-border-radius和border-radius，并将它们放入了一个名为.box的CSS选择器中。我们还定义了一个名为@font-size的变量，然后在.box选择器中使用。使用@include关键字调用mixin时，我们还可以传递参数。
最后，我们定义了一个选择器.half-box，它通过使用.box选择器的样式，实现了从一侧半宽度展示的效果。
在LESS中使用mixin和变量可以让我们更易于自定义、调整样式，同时减少代码的重复。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671f4bcc2e7021665efcdb73