今天小编跟大家讲解下有关动态的样式语言less语法详解之混合属性 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关动态的样式语言less语法详解之混合属性 的相关资料，希望小伙伴们看了有所帮助。
前面介绍了less的变量和extend语法 今天在研究下混合属性(Mixin)。混合可以说是less的另一个特征 你可以将通用属性定义在一块 然后使用时直接调用此混合属性。
混合： 在 LESS 中我们可以定义一些通用的属性集为一个选择器 然后在另一个选择器中去调用这些属性. 例如：
复制代码代码如下:.a, #b { color: red;}.mixin-class { .a();}.mixin-id { #b();}
编译后
复制代码代码如下:.a, #b { color: red;}.mixin-class { color: red;}.mixin-id { color: red;}
注意：在调用混合时 可以加括号也可以不加括号。下面这个也是对的：
复制代码代码如下:.a, #b { color: red;}.mixin-class { .a;}.mixin-id { #b;}
如果你只想定义一个混合 则可以再选择器后面加上括号 如下：
复制代码代码如下:.my-mixin { color: black;}.my-other-mixin() { background: white;}.class { .my-mixin; .my-other-mixin;}
编译后 加括号的.my-other-mixin()不会被编译。
复制代码代码如下:.my-mixin { color: black;}.class { color: black; background: white;}
任何 CSS class, id 或者 元素 属性集都可以以同样的方式引入.通用选择器中可以嵌套选择器。
命名空间： 如果你想混合属性在一个更复杂的选择器,可以叠放多个id或类。如下：
复制代码代码如下:#outer { .inner { color: red; }}
如果想使用这个混合属性 你可以这样 下面四个都是等价的
复制代码代码如下:.c{ #outer > .inner;}</p><p>.c{ #outer > .inner();}</p><p>.c{ #outer.inner;}</p><p>.c{ #outer.inner();}
你可以将混合属性定义在一个id的下面 这样就避免了与其他混合冲突。
关键字!important： 在使用混合属性后面加上!important关键字 则混合中的所有属性都会加上关键字!important。例如：
复制代码代码如下:.foo (@bg: #f5f5f5, @color: #900) { background: @bg; color: @color;}.unimportant { .foo(1);}.important { .foo(2) !important;}
编译后
复制代码代码如下:.unimportant { background: #f5f5f5; color: #900;}.important { background: #f5f5f5 !important; color: #900 !important;}
带参数的混合： 混合属性也可以通过括号传递参数 如下：
复制代码代码如下:.border-radius(@radius) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius;}
我们只需要在使用它的时候传递一个参数即可 如下：
复制代码代码如下:#header { .border-radius(4px);}.button { .border-radius(6px);}
当然我们也可以给参数一个默认值 这样使用的时候可以传值也可以不传值。如下：
复制代码代码如下:.border-radius(@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius;}
如果我们没有传值 则会使用默认值5px。
当然我们也可以传递多个参数 如下：
复制代码代码如下:.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);}
编译后
复制代码代码如下:.some .selector div { color-1: #008000; color-2: #008000; padding-2: 2;}
从编译的结果可以看出 less也有函数重载的特性。当我们定义相同混合属性名 参数不同 然后.mixin(#008000);调用 第一和第二混合都能匹配 [email protected] 所以不会引用第三个混合属性。
我们不仅可以传多个值 还可以指定属性名传值 如下：
复制代码代码如下:.mixin(@color: black; @margin: 10px; @padding: 20px) { color: @color; margin: @margin; padding: @padding;}.class1 { .mixin(@margin: 20px; @color: #33acfe);}.class2 { .mixin(#efca44; @padding: 40px);}
[email protected]:[email protected] 类似于js的arguments 他包含了传递给混合属性的所有参数 如下：
复制代码代码如下:.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);}
编译后
复制代码代码如下:.big-block { -webkit-box-shadow: 2px 5px 1px #000; -moz-box-shadow: 2px 5px 1px #000; box-shadow: 2px 5px 1px #000;}
[email protected]:[email protected]@reset包含除指明参数之外的参数 例如：
复制代码代码如下:.mixin(@a; @rest...) { // @[email protected] // @arguments包含了所有参数}
模式匹配： 有时候你想让混合根据你传入的参数做不同的事情 比如：
复制代码代码如下:.mixin(dark; @color) { color: darken(@color, 10%);}.mixin(light; @color) { color: lighten(@color, 10%);}.mixin(@_; @color) { display: block;}.class { .mixin(@switch; #888);}
[email protected] 不同的混合属性会被调用 比如
@switch: light;
编译后
复制代码代码如下:.class { color: #a2a2a2; display: block;}
作为函数使用Mixin： 当我们把混合当做函数使用时 在调用函数之后 函数中的变量是可以使用的 除非调用混合属性的元素自己定义了同样的变量。比如：
复制代码代码如下:.mixin() { @width: 100%; @height: 200px;}.caller { .mixin(); width: @width; height: @height;}
编译后
复制代码代码如下:.caller { width: 100%; height: 200px;}
使用表达式：
复制代码代码如下:.average(@x, @y) { @average: ((@x + @y) / 2);}div { .average(16px, 50px); //"call"the mixin padding: @average; // use its"return"value}
编译后
复制代码代码如下:div { padding: 33px;}
LESS VS SASS同类框架还有 SASS : http://sass-lang.com/, 与 LESS 相比 两者都属于 CSS 预处理器 功能上大同小异 都是使用类似程序式语言的方式书写 CSS, 都具有变量、混入、嵌套、继承等特性 最终目的都是方便 CSS 的书写及维护。
来源：爱蒂网
