前面介绍了less的变量和extend语法,今天在研究下混合属性(Mixin)。混合可以说是less的另一个特征,你可以将通用属性定义在一块,然后使用时直接调用此混合属性。
混合:
在 LESS 中我们可以定义一些通用的属性集为一个选择器,然后在另一个选择器中去调用这些属性. 例如:
编译后
注意:在调用混合时,可以加括号也可以不加括号。下面这个也是对的:
如果你只想定义一个混合,则可以再选择器后面加上括号,如下:
编译后,加括号的.my-other-mixin()不会被编译。
任何 CSS class, id 或者 元素 属性集都可以以同样的方式引入.通用选择器中可以嵌套选择器。
命名空间:
如果你想混合属性在一个更复杂的选择器,可以叠放多个id或类。如下:
如果想使用这个混合属性,你可以这样,下面四个都是等价的
}</p>
<p>.c{
#outer > .inner();
}</p>
<p>.c{
#outer.inner;
}</p>
<p>.c{
#outer.inner();
}
你可以将混合属性定义在一个id的下面,这样就避免了与其他混合冲突。
关键字!important:
在使用混合属性后面加上!important关键字,则混合中的所有属性都会加上关键字!important。例如:
编译后
带参数的混合:
混合属性也可以通过括号传递参数,如下:
我们只需要在使用它的时候传递一个参数即可,如下:
当然我们也可以给参数一个默认值,这样使用的时候可以传值也可以不传值。如下:
如果我们没有传值,则会使用默认值5px。
当然我们也可以传递多个参数,如下:
编译后
从编译的结果可以看出,less也有函数重载的特性。当我们定义相同混合属性名,参数不同,然后.mixin(#008000);调用,第一和第二混合都能匹配,但是第三个缺少参数@padding的值,所以不会引用第三个混合属性。
我们不仅可以传多个值,还可以指定属性名传值,如下:
关键字@arguments:
@arguments有特殊的含义,类似于js的arguments,他包含了传递给混合属性的所有参数,如下:
编译后
代码