less-带参数的混合（arguments）

r囧r小猫 2022-06-14 11:50 218阅读 0赞

1、

编辑less：

.border-radius(@radius) {
      -webkit-border-radius: @radius;
         -moz-border-radius: @radius;
              border-radius: @radius;
    }
    
    #header {
      .border-radius(4px);
    }
    .button {
      .border-radius(6px);
    }

生成css ：

#header { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
    .button { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; }

2、mixin与多个参数

编辑less：

.mixin(@color) {
      color-1: @color;
    }
    .mixin(@color; @padding:2) {
      color-2: @color;
      padding-2: @padding;
    }
    .mixin(@color; @padding; @margin: 2) {
      color-3: @color;
      margin: @margin @margin @margin @margin;
    }
    .some .selector div {
      .mixin(#008000,10);
    }

生成css：

.some .selector div {
      color-1: #008000;
      color-2: #008000;
      padding-2: 2;
      //这里没有生成color-3，是由于参数对应不上
    }

3、命名参数

编辑less：

.mixin(@color: black; @margin: 10px; @padding: 20px) { 
      color: @color;
      margin: @margin;
      padding: @padding;
    }
    .class1 {
      .mixin(@margin: 20px; @color: #33acfe);
    }
    .class2 {
      .mixin(#efca44; @padding: 40px);
    }

生成css：

.class1 { color: #33acfe; margin: 20px; padding: 20px; }
    .class2 { color: #efca44; margin: 10px; padding: 40px; }

4、@arguments 变量

编辑less：

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

生成css：

.big-block { -webkit-box-shadow: 2px 5px 1px #000; -moz-box-shadow: 2px 5px 1px #000; box-shadow: 2px 5px 1px #000; }

5、@rest 变量

编辑less：

.mixin(...) {        // matches 0-N arguments
    .mixin() {           // matches exactly 0 arguments
    .mixin(@a: 1) {      // matches 0-1 arguments
    .mixin(@a: 1; ...) { // matches 0-N arguments
    .mixin(@a; ...) {    // matches 1-N arguments
    
    
    .mixin(@a; @rest...) {
       // @rest is bound to arguments after @a
       // @arguments is bound to all arguments
    }

6、模式匹配

编辑less：

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

生成css：

.class { color: #a2a2a2; display: block; }