LESS 是一种 CSS 预处理器，它扩展了 CSS 语言，使得开发者可以使用变量、函数、mixin、extend 等功能来简化 CSS 的编写过程。在本文中，我们将详细介绍 LESS 中的这些概念及其用法，并通过示例代码来帮助读者更好地理解。
变量
在 LESS 中，可以使用变量来存储各种值，例如颜色、字体大小等。变量的定义使用 @ 符号，如下所示：
--------------- -------- ----------- -----
在定义变量后，可以在 CSS 中使用该变量，如下所示：
-- - ---------- ----------- ------ --------------- -
在编译成 CSS 后，上述代码会被转换为：
-- - ---------- ----- ------ -------- -
使用变量可以使得 CSS 的编写更加简洁，同时也方便了后期的维护。
函数
LESS 还提供了许多内置函数，可以用于处理各种值。例如，可以使用 darken 函数来降低颜色的亮度，如下所示：
--------------- -------- -------------------- ---------------------- -----
在上述代码中，darken 函数将 primary-color 的亮度降低了 10%。
LESS 还提供了许多其他函数，例如 lighten、saturate、desaturate、fadein、fadeout 等，可以根据实际需要使用。
Mixin
Mixin 可以理解为一种代码复用的手段，它允许我们将一些常见的样式集中到一个函数中，然后在需要使用这些样式的地方调用该函数。Mixin 的定义使用 .mixin-name() 的形式，如下所示：
----------------------- ---- - ---------------------- -------- ------------------- -------- -------------- -------- -
在上述代码中，我们定义了一个名为 border-radius 的 Mixin，它接受一个可选的参数 radius，如果未传递参数，则默认值为 5px。
然后在需要使用该样式的地方，可以使用 .mixin-name() 的形式来调用该 Mixin，如下所示：
---- - ----------------- -
上述代码中，我们定义了一个名为 box 的类，然后在其内部调用了 border-radius Mixin。
Mixin 还可以接受多个参数，例如：
--------------- -- --- -- ------ ---- ------- ----- - ----------- -- -- ----- ------- ---------------- -- -- ----- ------- ------------------- -- -- ----- ------- -
在上述代码中，我们定义了一个名为 box-shadow 的 Mixin，它接受四个参数，分别为 x、y、blur 和 color，如果未传递参数，则默认值分别为 0、0、5px 和 #000。
然后在需要使用该样式的地方，可以使用 .mixin-name() 的形式来调用该 Mixin，并传递参数，例如：
---- - ---------------- ----- -
在上述代码中，我们调用了 box-shadow Mixin，并传递了 x 和 y 两个参数。
Extend
Extend 可以理解为一种样式继承的方式，它允许我们将一个选择器的样式继承到另一个选择器中。Extend 的定义使用 &:extend(.selector) 的形式，其中 selector 是需要继承的选择器，如下所示：
---- - -------- ---- ----- ----------------- --------------- ------ ----- - ------------------------- - ----------------- --------------- -
在上述代码中，我们定义了一个名为 btn 的类，然后在 btn-primary 类中使用 &:extend(.btn) 的形式来继承 btn 类的样式。
使用 Extend 可以使得 CSS 的编写更加简洁，同时也方便了后期的维护。
总结
在本文中，我们详细介绍了 LESS 中的变量、函数、mixin、extend 等概念及其用法，并通过示例代码来帮助读者更好地理解。使用 LESS 可以使得 CSS 的编写更加简洁，同时也方便了后期的维护。希望本文能够对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6609faf3d10417a2228be1d3