LESS 是一种 CSS 预处理语言，它可以增加 CSS 的可读性和可维护性，并提供了许多方便的特性。其中，MIXIN 是一种非常有用的特性，可以帮助我们快速创建、扩展和复用样式。
MIXIN 是什么？
MIXIN 可以理解为一组 CSS 样式的集合，可以被其他样式继承和复用。在 LESS 中，我们可以使用 . 开头的类名来定义 MIXIN，例如：
.my-mixin {
font-size: 16px;
color: #333;
}这样就定义了一个名为 my-mixin 的 MIXIN，它包含了两个属性：font-size 和 color。接下来，我们可以使用 . 开头的类名来继承这个 MIXIN：
.my-class {
.my-mixin;
background-color: #fff;
}这样就定义了一个名为 my-class 的样式，它继承了 my-mixin MIXIN，并添加了一个 background-color 属性。生成的 CSS 如下：
.my-class {
font-size: 16px;
color: #333;
background-color: #fff;
}可以看到，my-mixin 中的样式被成功地继承并应用到了 my-class 中。
如何使用 MIXIN？
MIXIN 可以帮助我们快速创建、扩展和复用样式。通常情况下，我们可以将一些常用的样式封装成 MIXIN，以便在其他地方快速使用。例如：
.border-radius(@radius: 4px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}这个 MIXIN 可以用来设置元素的圆角半径，其中 @radius 是一个参数，可以指定圆角半径的大小，默认为 4px。使用方法如下：
.my-class {
.border-radius(10px);
}这样就将 .my-class 元素的圆角半径设置为 10px。生成的 CSS 如下：
.my-class {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}可以看到，MIXIN 可以帮助我们快速创建和复用样式，避免了重复编写样式的麻烦。
MIXIN 的高级用法
除了简单的样式复用外，MIXIN 还有一些高级用法，可以帮助我们更加灵活地使用样式。
嵌套 MIXIN
MIXIN 也可以嵌套在其他样式中，例如：
.button {
.border-radius;
background-color: #333;
color: #fff;
}这样就将 .button 元素的圆角半径设置为 4px。
条件判断
MIXIN 还可以使用条件判断语句，根据不同的条件应用不同的样式。例如：
.text-overflow(@ellipsis: true) {
white-space: nowrap;
overflow: hidden;
@if @ellipsis {
text-overflow: ellipsis;
}
}这个 MIXIN 可以用来设置文本溢出时的处理方式，其中 @ellipsis 是一个参数，表示是否需要省略号。使用方法如下：
.my-class {
.text-overflow();
}这样就将 .my-class 元素的文本溢出处理方式设置为默认值，不显示省略号。如果需要显示省略号，可以这样使用：
.my-class {
.text-overflow(true);
}这样就将 .my-class 元素的文本溢出处理方式设置为显示省略号。生成的 CSS 如下：
-- -------------------- ---- ------- --------- - ------------ ------- --------- ------- - --------- - ------------ ------- --------- ------- -------------- --------- -
可以看到，MIXIN 的条件判断语句可以帮助我们根据不同的情况应用不同的样式。
总结
MIXIN 是 LESS 中非常有用的特性，可以帮助我们快速创建、扩展和复用样式。使用 MIXIN 可以提高代码的可读性和可维护性，避免了重复编写样式的麻烦。在使用 MIXIN 时，我们需要注意参数的传递和条件判断语句的使用，以便更加灵活地应用样式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65e6806a1886fbafa41b84a5