Less-mixin判断（守卫）一

mixin卫士--判断

类似于JavaScript的if/else

example:
.test(@a) when (@a>10){//当大于10
    font-size:18px;
}
.test(@a) when (@a<=10){//当小于等于10
    font-size:12px;
}
.test(@a){//无守卫
    color:#ff6a00;
}

/调用(小于等于10)
.study{
    .test(5);
}

//output css
.study {
  font-size: 12px;
  color: #ff6a00;
}

//调用(大于10)
.study{
    .test(20);
}

//output css
.study {
  font-size: 18px;
  color: #ff6a00;
}

最后一个是无需判断就可以执行的，只要存在@a的值即可

与if/esle类似，同样可以与数字，字符串，属性，布尔值，变量等进行比较

example:
--布尔值
.test(@a) when (@a=true){
    color:#0094ff;
}
.study{
    .test(true);
}

//output css
.study {
  color: #0094ff;
}

下面这些值将不会被执行，因为不为真
.study{
    .test(false);
}
.study{
    .test(40);
}

--属性
.test(@a) when (@a=height){
    color:#0094ff;
    @{a}:16px;
}
.study{
    .test(height);
}

//output css
.study {
  color: #0094ff;
  height: 16px;
}

--参数
.test(@a,@b) when (@a>@b){
    color:#0094ff;
    height:unit(@a,px);
}
.test(@a,@b) when (@a<=@b){
    color:#0094ff;
    height:unit(@b,px);
}
.study{
    .test(50,30);
}

//output css
.study {
  color: #0094ff;
  height: 50px;
}

作者：leona

原文链接：http://www.cnblogs.com/leona-d/p/6307375.html

版权声明：本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接