less新手入门（二） Mixin 混合、带参数的Mixin
“mixin”属性只能基于现在已有的样式规则！你可以在mixin中使用类选择器和id选择器：
.a,#b{
color: rebeccapurple;
}
.mixin-class{
.a();
}
.mixin-id{
#b();
}
输出：
.a,
#b {
color: rebeccapurple;
}
.mixin-class {
color: rebeccapurple;
}
.mixin-id {
color: rebeccapurple;
}
注意，当调用mixin时，括号是可选的
.a() //此种写法和下面写法无区别
.a;
3.1 不输出的 mixin
如果你想创建一个mixin，但你不想让mixin在生成css中输出，你可以在它后面加上括号 () 。
.my-mixin{
color: black;
}
.my-other-mixin(){
background: wheat;
}
.class{
.my-mixin;
.my-other-mixin;
}
输出：
.my-mixin {
color: black;
}
//此处并没有输出 .my-other-mixin
.class {
color: black;
background: wheat;
}
3.2 选择器在mixin的用法
mixin不仅可以包含属性，还可以包含选择器
.my-hover-mixin(){
&:hover{
border: 1px solid red;
}
}
button{
.my-hover-mixin();
}
输出：
button:hover {
border: 1px solid red;
}
3.3 命令空间 Namespaces
如果想要在一个更复杂的选择器中混合属性，可以堆叠多个id或类
#outer{
.inner{
color: red;
}
}
.c{
#outer>.inner;
}
同样，上面的 > 符号是可选的，
// 下面写法都一样
#outer > .inner;
#outer > .inner();
#outer.inner;
#outer.inner();
这种使用方法被称为命名空间。您可以将mixin置于id选择器之下，这样可以确保它不会和另一个库冲突。
#my-library {
.my-mixin() {
color: black;
}
}
// which can be used like this
.class {
#my-library > .my-mixin();
}
3.4 !important 关键字
在mixin后使用 !important 关键字，将会标记调用所有继承的属性为!important
.foo (@bg: #f5f5f5, @color: #900) {
background: @bg;
color: @color;
}
.unimportant {
.foo(1);
}
.important {
.foo(2) !important;
}
输出：
.unimportant {
background: #f5f5f5;
color: #900;
}
.important {
background: #f5f5f5 !important;
color: #900 !important;
}
如何将参数传递给mixin？
mixin还可以接受参数，这些参数在混合时传递给选择器块。举例：
.border-radius(@radius) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
下面是我们如何将其混合到各种规则中:
#header {
.border-radius(4px);
}
.button {
.border-radius(6px);
}
参数mixin还可以为其参数设置默认值
.border-radius(@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
我们现在可以这样来调用:
#header {
.border-radius;
}
你也可以使用不带参数的参数混合。如果您希望从CSS输出中隐藏规则集，但希望将其属性包含在其他规则集中，则这非常有用：
.wrap() {
text-wrap: wrap;
white-space: -moz-pre-wrap;
white-space: pre-wrap;
word-wrap: break-word;
}
pre { .wrap }
输出如下：此案例同 上方 3.1
pre {
text-wrap: wrap;
white-space: -moz-pre-wrap;
white-space: pre-wrap;
word-wrap: break-word;
}
4.1 mixin中包含多个参数 - Mixins With Multiple Parameters
参数是 分号 或 逗号 分割的。
建议使用分号。因为逗号有双重含义：它既可以被解释为mixin参数的分隔符，也可以作为css列表分隔符，容易混淆。
如果使用逗号作为mixin分隔符，那么就不可能创建使用逗号分隔的列表作为参数。另一方面，如果编译器在mixin调用或声明中看到至少一个分号，那么它假设参数由分号分隔，所有逗号都属于css列表：
- 两个参数和每个包含逗号分隔的列表: .name(1, 2, 3; something, else)
- 三个参数，每个参数包含一个数字：.name(1, 2, 3)
- 使用假分号来创建一个包含逗号分隔的css列表的mixin调用：.name(1, 2, 3;)
- 逗号分隔的默认值：.name(@param1: red, blue;)
定义多个具有相同名称和参数的mixin是合法的。Less将使用所有可以应用的属性。如果你用mixin与一个参数，例如，. mixin(green)，那么就会使用所有具有一个强制参数的mixin属性：
.mixin(@color) {
color-1:@color;
}
.mixin(@color;@padding:2){
color-2:@color;
padding-2:@padding
}
.mixin(@color;@padding;@margin:2){
color-3:@color;
padding-3:@padding;
margin: @margin @margin @margin @margin;
}
.some .selector div{
.mixin(#008000);
}
输出：
.some .selector div {
color-1: #008000;
color-2: #008000;
padding-2: 2;
}
4.2 命令参数
mixin引用的时候仅使用参数名称引用即可，不需要有任何特殊的顺序
.class1(@color:black;@margin:10px;@padding:20px){
color: @color;
margin: @margin;
padding: @padding;
}
.demo1{
.class1(@margin:20px; @color:#33acfe);
}
.demo2{
.class1(#efca33; @padding:40px;)
}
输出：
.demo1 {
color: #33acfe;
margin: 20px;
padding: 20px;
}
.demo2 {
color: #efca33;
margin: 10px;
padding: 40px;
}
4.3 @arguments变量
@arguments在mixin中有一个特殊的含义，它包含所有传入的参数，当mixin被调用时。如果你不想处理个别参数，这很有用:
.box-shadow(@x:0; @y:0; @blur:1px; @color:#000){
-webkit-box-shadow:@arguments;
-moz-box-shadow:@arguments;
-box-shadow:@arguments;
}
.big-block{
.box-shadow(2px; 5px;)
}
输出：
.big-block {
-webkit-box-shadow: 2px 5px 1px #000;
-moz-box-shadow: 2px 5px 1px #000;
-box-shadow: 2px 5px 1px #000;
}
4.4 高级参数和@rest变量
您可以使用 … ，如果你想让你的mixin采取一个可变数目的参数。在变量名之后使用这个变量会将这些参数赋给变量。
.mixin(...) { // 匹配0-N 个参数
.mixin() { // 只匹配0个参数
.mixin(@a: 1) { // 匹配0-1个参数
.mixin(@a: 1; ...) { // 匹配0-N个参数
.mixin(@a; ...) { // 匹配1-N个参数
此外，
.mixin(@a; @rest...) {
// @rest绑定到 @a 之后的参数
// @arguments 绑定到所有参数
}
4.5 模式匹配
有时，您可能希望根据你传递给它的参数来更改mixin的行为。让我们从一些基本的东西开始:
.mixin(@s; @color) { ... }
.class {
.mixin(@switch; #888);
}
现在我们想要 .mixin的行为方式不同，基于@ switch的值，我们可以像这样定义 .mixin:
.mixin(dark; @color) {
color: darken(@color, 10%);
}
.mixin(light; @color) {
color: lighten(@color, 10%);
}
.mixin(@_; @color) {
display: block;
}
现在,如果我们运行:
@switch: light;
.class {
.mixin(@switch; #888);
}
.class {
color: #a2a2a2;
display: block;
}
- 第一个mixin定义不匹配，因为它设置第一个参数是 dark 。
- 第二个mixin定义匹配，因为它设置的参数是 light。
- 第三个mixin定义匹配，因为它设置的参数为 任何值。
.mixin(@a) {
color: @a;
}
.mixin(@a; @b) {
color: fade(@a; @b);
}
现在如果我们使用 .mixin只定义一个参数，我们将得到第一个定义的输出，但是如果我们用两个参数调用它，我们将得到第二个定义，即颜色值为 @ a淡入到 @ b。
