将规则集传递到混合

在上一个小节中我们学习了混合函数相关的语法特性，或者说是具有返回值的函数。

在 Less 中，我们可以把一个规则集当作一个 mixins 来使用，但是要注意区别两者之间的不同之处。

1. 什么是规则集？

Allow wrapping of a css block, defined in a mixin 。——官方定义

慕课解释：把一个值为规则集的变量作为 Mixins 使用。

2. 语法详情

变量不仅可以作为一个值或路径，也可以是一组 css 属性、嵌套的规则集、媒体声明或存储在变量中的任何其他内容。

当变量是一个规则集合时，我们可以把这个变量看作是一个特殊定义方式的 Mixins 。比如：

@mixins: { background: red; };

img {
  @mixins(); 
}

@mixins 变量作用此时和 Mixins 是一样的，注意变量后也需要加 “()” 。

编译后：

img {
  background: red;
}

3. 使用场景

使用场景主要用于定义一个样式属性不定的 Mixins ，它可以在媒体查询或非支持的浏览器类名中封装一段属性值。规则集可以传递给 Mixins，以便 Mixins 可以包装内容。

比如 .ie() 已经定义了媒体查询根类，这样我们就可以使用 Mixins 来封装一段代码。

• 输入代码

.ie(@rules) {
  @media screen and (min-width: 1200) { @rules(); }
  html.lt-ie9 &                       { @rules(); }
}

div {
  background-color: blue;

  .ie({
    background-color: red;
  });
}

• 输出代码

div {
  background-color: blue;
}

@media screen and (min-width: 1200) {
  div {
    background-color: red;
  }
}
html.lt-ie9 div {
  background-color: red;
}

4. 示例

4.1 返回 Mixins

变量所包含的规则集中也允许含有 Mixins 并将其返回。

• 输入代码

@return: { 
    .mixin() {
        background-color:red;
    }
};

.callback {
    @return(); 
    .mixin();
}

• 输出代码

.callback {
  background-color: red;
}

5. Tips

变量的 css 规则集作用域有以下两个特点：

1. 规则集内可以使用调用者内定义的变量和混合。
2. 外部同名的变量优先级高于调用者内部定义的同名变量。

• 输入代码：

@params: #fff;

@data: {
  color : @params; 
};

#id {
  @data();
  @params: red;
}

• 输出代码

#id {
  color: #fff; // 将会使用外部全局变量
}

6. 知识点对比

定义变量时值为 css 规则集（以下简称变量）时这个变量可以看作是一个 Mixins 。但是它与 Mixins 又有什么区别哪？主要有以下几点：

1. 定义的形式不同，Mixins 可以作为一个 ID 选择器或者是类选择器为 demo 节点增加样式，简单来说就是 Mixins 可以出现在编译后的代码中，而变量不能。
2. 作为混合函数时使用范围不同，Mixins 可以返回 Mixins 或变量，而变量只能返回 Mixins 。

  @detached-ruleset: { 
      @color:blue; // @color 属于私有变量
  };

  .caller {
      @detached-ruleset();
      color: @color; // syntax error
  }

7. 小结

本章节我们介绍了规则集作为混合的用法，初学者可能会将规则集、变量、混合这几个概念混淆，规则集属于一种变量同时也可以作为混合使用，建议各位看官根据使用场景区分这几个概念。