less语法（二）混合属性

时间：2022-06-10 11:43:06

摘要：

　　前面介绍了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;
}

.c{
    #outer > .inner();
}

.c{
    #outer.inner;
}

.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);调用，第一和第二混合都能匹配，但是第三个缺少参数@padding的值，所以不会引用第三个混合属性。

我们不仅可以传多个值，还可以指定属性名传值，如下：

.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，他包含了传递给混合属性的所有参数，如下：

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

 

关键字@reset:

　　与@arguments不同的是@reset包含除指明参数之外的参数，例如：

.mixin(@a; @rest...) {
   // @rest包含了@a之后的参数
   // @arguments包含了所有参数
}

 

模式匹配：

　　有时候你想让混合根据你传入的参数做不同的事情，比如：

.mixin(dark; @color) {
  color: darken(@color, 10%);
}
.mixin(light; @color) {
  color: lighten(@color, 10%);
}
.mixin(@_; @color) {
  display: block;
}


.class {
  .mixin(@switch; #888);
}

 

对于.class你赋给变量@switch不同的值，不同的混合属性会被调用，比如

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

 

标签：

相关文章