什么是Mixin

it2022-05-06  7

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

最新回复(0)