less学习-带参数混合

在 LESS 中，你还可以像函数一样定义一个带参数的属性集合:

.border-radius (@radius) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}

        

          
        
        
        

          

          AI 代码解读
        
      
      

然后在其他class中像这样调用它:

#header {
  .border-radius(4px);
}
.button {
  .border-radius(6px);  
}

        

          
        
        
        

          

          AI 代码解读
        
      
      

我们还可以像这样给参数设置默认值:

.border-radius (@radius: 5px) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}

        

          
        
        
        

          

          AI 代码解读
        
      
      

所以现在如果我们像这样调用它的话:

#header {
  .border-radius;  
}

        

          
        
        
        

          

          AI 代码解读
        
      
      

radius的值就会是5px.

你也可以定义不带参数属性集合,如果你想隐藏这个属性集合，不让它暴露到CSS中去，但是你还想在其他的属性集合中引用，你会发现这个方法非常的好用:

.wrap () {
  text-wrap: wrap;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  word-wrap: break-word;
}

pre { .wrap }

        

          
        
        
        

          

          AI 代码解读
        
      
      

输出:

pre {
  text-wrap: wrap;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  word-wrap: break-word;
}

        

          
        
        
        

          

          AI 代码解读
        
      
      

@arguments 变量
@arguments包含了所有传递进来的参数. 如果你不想单独处理每一个参数的话就可以像这样写:

.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
  box-shadow: @arguments;
  -moz-box-shadow: @arguments;
  -webkit-box-shadow: @arguments;
}
.box-shadow(2px, 5px);

        

          
        
        
        

          

          AI 代码解读
        
      
      

将会输出:

  box-shadow: 2px 5px 1px #000;
  -moz-box-shadow: 2px 5px 1px #000;
  -webkit-box-shadow: 2px 5px 1px #000;

        

          
        
        
        

          

          AI 代码解读
        
      
      

个人博客：付博瀚的个人博客