什么是Mixin

╰半夏微凉° 2021-11-17 05:58 400阅读 0赞

Mixin意为混合，在css预处理器中，允许你将一个类嵌入到另一个类中，被嵌入的类也可以看作变量。换句话说，你可以用一个类定义样式，然后把它当作变量，在另一个类中，只要引用变量的名字，就能使用它的所有属性，

以LESS为例：

.bordered {
      border-top: dotted 1px black;
      border-bottom: solid 2px black;
    }

上述代码中，.bordered 定义了一个一组属性。之后在任何需要使用 .bordered 属性集的选择器中，只需像下面这样调用就可以了：

#menu a {
      color: #111;
      .bordered;
    }
    .post  a {
      color: red;
      .bordered;
    }

这样一来，.bordered中定义的属性集，就会在 \#menu a 和 .post a 中体现出来。严格说起来，这只是一种语法糖，编译后的CSS代码为：

.bordered {
      border-top: dotted 1px black;
      border-bottom: solid 2px black;
    }
    #menu a {
      color: #111;
      border-top: dotted 1px black;
      border-bottom: solid 2px black;
    }
    .post  a {
      color: red;
      border-top: dotted 1px black;
      border-bottom: solid 2px black;
    }

从上面的代码可以看出：mixin 其实就是一种嵌套，简单的讲，mixin 就是规则级别的复用。除了类选择器外，你也可以使用 id 选择器来定义 mixin。如：

#bordered {
      border-top: dotted 1px black;
      border-bottom: solid 2px black;
    }
    #menu a {
      color: #111;
      #bordered;
    }

编译后的CSS代码为：

#bordered {
      border-top: dotted 1px black;
      border-bottom: solid 2px black;
    }
    #menu a {
      color: #111;
      border-top: dotted 1px black;
      border-bottom: solid 2px black;
    }

从上面的代码可以看出，使用 class、id 定义mixin 时，mixin的定义会被原封不动的输出到编译生成的CSS代码中。

如果希望编译生成的CSS代码中不包含mixin的定义，在定义 mixin时，只需在 class、id 的后面添加一对小括号即可。而在调用时，小括号是可选的。如：

#x() {
      border-top: dotted 1px black;
      border-bottom: solid 2px black;
    }
    #menu a {
      color: #111;
      #x;
    }

编译后的CSS代码为：

#menu a {
      color: #111;
      border-top: dotted 1px black;
      border-bottom: solid 2px black;
    }