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;
}

现在, 如果我们运行:

?

| 12345 | @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。