LESS 是一种 CSS 预编译器，它通过添加一些扩展功能来简化 CSS 的编写和维护。其中，最强大的功能之一就是继承。继承可以让我们轻松地重用部分 CSS 规则，并减少代码的冗余程度。
本文将详细介绍LESS 继承的用法以及其他相关方法。
继承
在 LESS 中，我们可以通过 @extend 指令来实现继承。方法非常简单，只需要将要继承的样式的选择器写在 @extend 后面就行了。比如：
-- -------------------- ---- ------- ---- - ------ ------ ------- ------ ------- --- ----- ----- - -------- - ------- ----- ----------------- ---- -
上面的代码中，.box-red 继承了 .box 的全部样式，并在此基础上新增了 background-color 属性。这里需要注意的是，如果一个选择器中使用了 @extend，那么在该选择器的样式中除了 @extend 后面的选择器之外，所有的样式都会被忽略。比如：
-- -------------------- ---- ------- ---- - ------ ------ ------- ------ ------- --- ----- ----- - -------- - ------- ----- ----------------- ---- ------------- ------ -- -- ------------ ---- -- -
这是因为 .box-red 继承了 .box 选择器的所有样式，包括 border 属性，所以 border-color: green; 不会生效。
除了继承一个已经存在的选择器外，我们还可以继承一个占位符选择器。占位符选择器是类似于普通选择器的，但是在 LESS 中不会被渲染出来，只有在其他选择器继承它时才会生效。通过占位符选择器，我们可以实现一些末尾诸如 -base、-common、-flexible 等公共样式的规范化。
使用占位符选择器来定义公共样式：
%box-base {
width: 200px;
height: 200px;
border: 1px solid #ccc;
}使用占位符选择器来继承公共样式：
.box-red {
@extend %box-base;
background-color: red;
border-color: green; /* 这个 border-color 生效 */
}mixin
继承是 LESS 中最重要的方法之一，但是它并不总是最好的选择，特别是在处理一组不相关的规则时。这时候，Mixin 就是一个更好的选择。Mixin 可以让我们定义一组样式规则，并在需要的时候调用它们。
Mixin 的语法非常简单：在 @mixin 后面写上一个名称，在一对大括号中编写一组样式规则，然后在需要的地方，使用 @include 把这些样式规则调用出来即可。比如：
@mixin box-shadow(@x: 0, @y: 0, @blur: 1px, @color: #000) {
box-shadow: @x @y @blur @color;
}定义一个名为 box-shadow 的 Mixin，它包含了 x（默认值为 0）、y（默认值为 0）、blur（默认值为 1px）和 color（默认值为 #000）4 个参数，然后在需要的地方，用 @include 把它们调出来：
.box {
width: 200px;
height: 200px;
border: 1px solid #ccc;
@include box-shadow(2px, 2px);
}这样就不需要每次都写一遍阴影了。
需要注意的是， Mixin 是可以继承的，它们可以包含其他 Mixin，也可以包含其他组件等。这些都使得我们可以轻松地进行高级样式设计。
循环
在 LESS 中，我们还可以使用 for 循环来生成样式，用法和普通编程语言中的 for 循环一样，它可以帮助我们解决一些重复的样式问题。例如：
@for @i from 1 to 5 {
.col-@{i} {
width: calc((100% - 20px) / 5 * @{i} + 20px);
}
}上面的代码中，我们使用了一个 @for 循环，让 i 的取值从 1 到 5，然后用 @{i} 来代替它，生成了一组 .col-1、.col-2、.col-3、.col-4 和 .col-5 五个选择器，它们所对应的宽度（width）分别是 (100% - 20px) / 5 * 1 + 20px、(100% - 20px) / 5 * 2 + 20px、(100% - 20px) / 5 * 3 + 20px、(100% - 20px) / 5 * 4 + 20px 和 (100% - 20px) / 5 * 5 + 20px。循环的方法可以让我们减少写重复的样式代码。
总结
LESS 的继承、Mixin 和循环都是非常有用的方法，可以帮助我们快速地编写出易于维护和拓展的样式代码。但是，我们需要注意它们的使用方法和场景，以免滥用带来不必要的麻烦。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65b5eb9badd4f0e0ffea7888