LESS 是一种 CSS 扩展语言，在原生 CSS 的基础上提供了更多的功能，其中变量和 Mixin 是 LESS 中最为常用的两个功能。本文将介绍 LESS 中变量和 Mixin 的作用及使用，为前端开发者提供指导和启示。
1. 变量的作用及使用
1.1 变量的作用
LESS 中的变量可以用来存储常数、颜色、字体等 CSS 属性值，方便我们在样式表中重用。可以将变量定义在全局或局部作用域内，在以后的样式定义中通过调用变量来达到更加方便和灵活的操作。
1.2 变量的使用
定义变量非常简单，在 LESS 中，我们可以使用 @ 符号来定义一个变量，如下所示：
---------- ------ -----------
通过上述语句定义了一个名为 fontName 的变量，并初始化为 Arial, sans-serif 。
接下来在 LESS 样式表中使用该变量，显然会更加方便，如下所示：
---- - ------------ ---------- -
通过上述语句，我们将网页的字体设置为 @fontName 所定义的字体，这样我们就可以很方便地在样式表中修改该字体，而不必一个一个改。
除了类似于字体这样的变量，我们还可以定义一些常量，如颜色、间距等属性，具体示例代码如下：
-------------- -------- --------- --------- ----- -------- ------------ ---- -------- ------- - ----------------- -------------- -------- --------- - ---- - ------------ ------------ -------- --------- -
通过上述代码，我们定义了三个变量，然后在 .header 和 .box 两个类中分别调用了这些变量，使得代码更加简洁和易于维护。
2. Mixin 的作用及使用
2.1 Mixin 的作用
Mixin 是 LESS 中的另一个功能，它可以让我们重复使用一段 CSS 样式代码。如果我们需要在多个元素中应用同样的样式代码，就可以使用 Mixin。Mixin 还可以带参数，使得我们可以通过参数来定制样式，增加复用性。
2.2 Mixin 的使用
定义一个 Mixin 的语法很简单，它是将一些 CSS 代码块定义为一个 Mixin，可以在后面的样式中通过调用这个 Mixin 来实现代码复用，示例代码如下：
-- -- ----- --------------- -- --- -- ------ ---- ------- ----- - ------------------- -- -- ----- ------- ---------------- -- -- ----- ------- ----------- -- -- ----- ------- - -- -- ----- -------- - ---------------- ---- ------ -
上述代码中，我们定义了一个名为 box-shadow 的 Mixin，它有四个参数，分别是 X 轴偏移量、Y 轴偏移量、模糊半径和颜色，其中 X 轴偏移量和 Y 轴偏移量有默认值。在我们调用这个 Mixin 时，可以传递给它一些参数，实现定制化的样式代码。
总结
在 LESS 中使用变量和 Mixin 可以让我们更加方便地编写和维护 CSS 代码。变量可以存储常见的属性，提高可读性和可维护性，Mixin 可以用于复用样式代码，减少 CSS 代码的冗余，增加代码的复用性。在实际开发过程中，我们应该善于使用这两个功能，以提高代码效率和可维护性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66449955d3423812e427fcce