摘要:
前面介绍了less的变量和extend语法,今天在研究下混合属性(Mixin)。混合可以说是less的另一个特征,你可以将通用属性定义在一块,然后使用时直接调用此混合属性。
混合:
在 LESS 中我们可以定义一些通用的属性集为一个选择器,然后在另一个选择器中去调用这些属性. 例如:
1 | .a, #b { color: red;}.mixin- class { .a();}.mixin-id { #b();}
|
登入後複製
编译后
1 | .a, #b { color: red;}.mixin- class { color: red;}.mixin-id { color: red;}
|
登入後複製
注意:在调用混合时,可以加括号也可以不加括号。下面这个也是对的:
1 | .a, #b { color: red;}.mixin- class { .a;}.mixin-id { #b;}
|
登入後複製
如果你只想定义一个混合,则可以再选择器后面加上括号,如下:
1 | .my-mixin { color: black;}.my-other-mixin() { background: white;}. class { .my-mixin; .my-other-mixin;}
|
登入後複製
编译后,加括号的.my-other-mixin()不会被编译。
1 | .my-mixin { color: black;}. class { color: black; background: white;}
|
登入後複製
任何 CSS class, id 或者 元素 属性集都可以以同样的方式引入.通用选择器中可以嵌套选择器。
命名空间:
如果你想混合属性在一个更复杂的选择器,可以叠放多个id或类。如下:
1 | #outer { .inner { color: red; }}
|
登入後複製
如果想使用这个混合属性,你可以这样,下面四个都是等价的
1 | .c{ #outer > .inner;}.c{ #outer > .inner();}.c{ #outer.inner;}.c{ #outer.inner();}
|
登入後複製
你可以将混合属性定义在一个id的下面,这样就避免了与其他混合冲突。
关键字!important:
在使用混合属性后面加上!important关键字,则混合中的所有属性都会加上关键字!important。例如:
1 | .foo (@bg: #f5f5f5, @color: #900) { background: @bg; color: @color;}.unimportant { .foo(1);}.important { .foo(2) !important;}
|
登入後複製
编译后
1 | .unimportant { background: #f5f5f5; color: #900;}.important { background: #f5f5f5 !important; color: #900 !important;}
|
登入後複製
带参数的混合:
混合属性也可以通过括号传递参数,如下:
1 | .border-radius(@radius) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius;}
|
登入後複製
我们只需要在使用它的时候传递一个参数即可,如下:
1 | #header { .border-radius(4px);}.button { .border-radius(6px);}
|
登入後複製
当然我们也可以给参数一个默认值,这样使用的时候可以传值也可以不传值。如下:
1 | .border-radius(@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius;}
|
登入後複製
如果我们没有传值,则会使用默认值5px。
当然我们也可以传递多个参数,如下:
1 | .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);}
|
登入後複製
编译后
1 | .some .selector div { color-1: #008000; color-2: #008000; padding-2: 2;}
|
登入後複製
从编译的结果可以看出,less也有函数重载的特性。当我们定义相同混合属性名,参数不同,然后.mixin(#008000);调用,第一和第二混合都能匹配,但是第三个缺少参数@padding的值,所以不会引用第三个混合属性。
我们不仅可以传多个值,还可以指定属性名传值,如下:
1 | .mixin(@color: black; @margin: 10px; @padding: 20px) { color: @color; margin: @margin; padding: @padding;}.class1 { .mixin(@margin: 20px; @color: #33acfe);}.class2 { .mixin(#efca44; @padding: 40px);}
|
登入後複製
关键字@arguments:
@arguments有特殊的含义,类似于js的arguments,他包含了传递给混合属性的所有参数,如下:
1 | .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);}
|
登入後複製
编译后
1 | .big-block { -webkit-box-shadow: 2px 5px 1px #000; -moz-box-shadow: 2px 5px 1px #000; box-shadow: 2px 5px 1px #000;}
|
登入後複製
关键字@reset:
与@arguments不同的是@reset包含除指明参数之外的参数,例如:
模式匹配:
有时候你想让混合根据你传入的参数做不同的事情,比如:
1 | .mixin(dark; @color) { color: darken(@color, 10%);}.mixin(light; @color) { color: lighten(@color, 10%);}.mixin(@_; @color) { display: block;}. class { .mixin(@ switch ; #888);}
|
登入後複製
对于.class你赋给变量@switch不同的值,不同的混合属性会被调用,比如
编译后
1 | . class { color: #a2a2a2; display: block;}
|
登入後複製
作为函数使用Mixin:
当我们把混合当做函数使用时,在调用函数之后,函数中的变量是可以使用的,除非调用混合属性的元素自己定义了同样的变量。比如:
1 | .mixin() { @width: 100%; @height: 200px;}.caller { .mixin(); width: @width; height: @height;}
|
登入後複製
编译后
1 | .caller { width: 100%; height: 200px;}
|
登入後複製
使用表达式:
1 | .average(@x, @y) { @average: ((@x + @y) / 2);}div { .average(16px, 50px);
|
登入後複製
编译后