LESS是一种CSS预处理器，可以使得写样式表更为高效和简洁。其中mixin是一项十分实用的特性，它允许开发者将一组属性集合编写成一个合成的类名，从而可以在需要使用该属性集的地方调用而不必重复编写。本文将探讨LESS的mixin技巧与应用，具有指导意义和实例代码举例。
基础语法
LESS的mixin使用@ mixin命令定义。其中，@mixin命令的书写方式与CSS的样式定义很相似，只不过把选择器名替换为@mixin命令，如果需要传递参数，还需要在@mixin名称后面添加参数列表，参数列表中各参数用逗号隔开。
定义一个基本的无参mixin，例如：
@mixin border-radius {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}这个mixin定义了一个圆角为5像素的class，只需要在需要使用其它元素的css样式时，通过@include命令引入此mixin即可。
.box {
width: 200px;
height: 200px;
background-color: #f00;
@include border-radius;
}这样就可以将.box的圆角设置为5像素。还可以传递参数，引入另一个mixin样例：
// javascriptcn.com 代码示例
@mixin transition($property) {
-webkit-transition: $property;
-moz-transition: $property;
-ms-transition: $property;
-o-transition: $property;
transition: $property;
}
.box2 {
width: 200px;
height: 200px;
background-color: #f00;
@include transition(all 0.3s ease-out);
}上述代码段定义了一个mixin，可以为box2元素中的所有属性过渡增加效果。通过传递不同的参数设置不同的过渡效果。
样式属性继承
mixin在LESS中最为重要的使用场景是通过继承来设置样式。
比如，在某些情况下，想要将某个组件的样式精简，但又不希望影响占位符的样式。此时，可以使用extend指令和@mixin指令来实现CSS代码的精简。
// javascriptcn.com 代码示例
.image{
display:block;
height:auto;
}
.rounded{
@extend .image;
border-radius:6px;
}本段代码中，image类为基类，再传入rounded类作为继承后，给该类增加了圆角特性。
由此可见，通过使用mixin功能，可以将样式的重复、冗长代码缩减到最少，从而可提高项目的稳定性和可维护性。
命名空间
最后，我们讨论一下Mixin的另一个重要方面，即命名空间。
在实际项目中，为了使开发人员能更好地理解写出的代码，我们需要限制mixin的访问作用域，这时命名空间便可以给mixin带来更好的管理。
命名空间的创建方式为，在@mixin关键字后面添加"."和命名空间。如下：
// javascriptcn.com 代码示例
.mystyle{
.border{
border:1px solid red;
}
.no-pad{
padding:0;
}
.no-margin{
margin:0;
}
.height{
height:300px;
}
.noselect{
-moz-user-select:none;
-webkit-user-select:none;-ms-user-select:none;user-select:none;
}
}此时，就可以通过“.mystyle”的引入来调用出相应混合器的效果，提升了可复用性和可维护性。
.myclass{
.mystyle > .border;
.mystyle > .no-pad;
}总结
LESS是一款优秀的CSS预处理器之一，提供了多种特性，其中mixin是其中之一。通过mixin，我们能够从各个方面为CSS样式提供更高的可重用性并减少代码的冗赘。在此基础上，我们可以通过样式属性继承、命名空间等高级功能，为CSS开发提供更多模块化管理的手段，进一步提高项目的稳定性、可复用性及可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65041e0d95b1f8cacd0db016