什么是 LESS？
LESS 是一种 CSS 预处理器，可以使得 CSS 的编写更加简单、快捷、易读易维护。通过使用 LESS，可以在 CSS 中使用变量、函数、算术运算、嵌套规则等特性，使得编写 CSS 的过程更加高效和便捷。LESS 和 Sass 以及 Stylus 是目前比较流行的 CSS 预处理器。
混合物语法
在 LESS 中，混合器是比较重要的一个特性，它可以相当于一个 CSS 样式的模板，可以大大地提高样式的复用性。下面是一个混合器的例子：
.border-radius(@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; }
这个混合器定义了一个圆角的通用属性，可以通过 @radius 参数来定义不同的圆角属性。
在使用混合器的时候，我们可以通过 . 符号来调用这个混合器：
.box1 { .border-radius(10px); } .box2 { .border-radius(); }
在以上的例子中，.box1 元素使用了 @radius 为 10px 的圆角属性，而 .box2 元素则使用了默认值为 5px 的圆角属性。
混合器的继承
在 LESS 中，混合器是可以被继承的，这也是 LESS 中混合器的一个很重要的特性。下面是一个混合器继承的例子：
-- -------------------- ---- ------- ------------- ----- --- ----- - ------ --- ------- --- ----------- ----- -------- ------------- - ------- - ---------------- ------ ------------ ----- ----------- ------- -------------- ---- ------- ----- -展开代码
在这个例子中，我们定义了一个名为 .identity 的混合器，这个混合器包含了一些基本的样式，它的作用是用来定义一些基本的样式。我们通过在 .button 类中调用 .identity 混合器，并且在这个混合器的基础上，添加一些特定的样式，从而创建了一个名为 .button 的类。
实例
下面是一个混合器使用的实例。在这个例子中，我们定义了一个使用 Gravatar 头像的列表，它包含了多个用户的头像和名字。在这个例子中，我们使用混合器来定义基本样式，并且使用参数来实现头像和名字的不同显示方式。
-- -------------------- ---- ------- -- ---------- -- ---------------- ----- ----------- ----- ------------- ---- - ------ ------ ------- ------ ------- - -------------- ---- --------- ------- - ----- - ---------- ----------- ------------ ------------- ----------- ------- ----------- ----- - - -- --- --- -- -- ----- - -------- ----- ---------- ----- ---------------- ------- ------------ ------- - -- -------- -- ---------- - --------------- ----- ----- ------- - --- - ------ ----- ------- ----- ----------- ------ - - - ---------- - --------------- ----- ----- ------- - ----------- ----- - ----- - -------- ----- - -展开代码
在这个例子中，我们首先定义了一个名为 .identity 的混合器，然后我们使用这个混合器来创建 .customer1 和 .customer2 两个元素。通过这种方式，我们可以极大地提高 CSS 样式的复用性，并且方便地实现不同元素的不同显示效果。
总结
LESS 中混合器是一个十分重要的特性，通过混合器，我们可以方便地实现样式的复用和继承，从而大大地提高 CSS 样式的编写效率。在使用混合器的时候，我们需要注意参数的使用和继承关系，这样才能达到更高的效率和更好的代码维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65a9e5f6add4f0e0ff35b714
