在前端开发中，我们常常需要定义一些常用的样式，例如颜色、字体、边框等。为了避免代码冗余，我们可以使用 LESS 变量来实现可回收的 CSS 样式。
LESS 变量
LESS 是一种 CSS 预处理器，它可以扩展 CSS 语言，提供了许多方便的功能，其中包括变量。使用 LESS 变量可以方便地定义常用的样式，并在需要时进行调用，避免了重复的代码。例如：
-- -------------------- ---- ------- --------------- -------- ----------------- -------- ------- - ----------------- --------------- ------ ----- - ----------------- - ----------------- ----------------- ------ ----- -
在上面的代码中，我们定义了两个变量 @primary-color 和 @secondary-color，分别代表主色和副色。然后我们在 .button 和 .button-secondary 类中使用了这两个变量，避免了重复的样式定义。
可回收的样式
除了定义常用的颜色和字体等样式，我们还可以使用 LESS 变量来实现可回收的 CSS 样式。例如，我们可以定义一个 .border-radius 类，用于设置元素的圆角大小：
@border-radius: 5px;
.border-radius {
border-radius: @border-radius;
}然后我们可以在其他元素中使用这个类来设置圆角大小：
-- -------------------- ---- ------- ------- - ----------------- --------------- ------ ----- --------------- - ------ - ----------------- ----------------- ------ ----- --------------- -
在上面的代码中，我们在 .button 和 .alert 类中都使用了 .border-radius 类，避免了重复的样式定义。这样，如果我们需要修改圆角大小，只需要修改一处即可。
总结
使用 LESS 变量可以方便地定义常用的样式，并在需要时进行调用，避免了重复的代码。我们可以定义一个可回收的 CSS 样式类，用于设置元素的通用样式。这样，如果我们需要修改样式，只需要修改一处即可，大大提高了开发效率。
示例代码
-- -------------------- ---- ------- --------------- -------- ----------------- -------- --------------- ---- -------------- - -------------- --------------- - ------- - ----------------- --------------- ------ ----- --------------- - ----------------- - ----------------- ----------------- ------ ----- --------------- - ------ - ----------------- ----------------- ------ ----- --------------- -
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66077f22d10417a22260c5bd