less新手入门（二） Mixin 混合、带参数的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？

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 定义才会被使用，变量可以匹配并绑定到任何值。除了变量之外的，其他任何东西都只匹配一个与自身相等的值。

这里我们也可以对颜色的浓度进行匹配，例如:

.mixin(@a) { color: @a;
} .mixin(@a; @b) { color: fade(@a; @b); }

现在如果我们使用 .mixin只定义一个参数，我们将得到第一个定义的输出，但是如果我们用两个参数调用它，我们将得到第二个定义，即颜色值为 @ a淡入到 @ b。

秒客网