Less的特性总结

0.简介

LessCSS是一种动态样式语言

1.变量

@variable:value;
变量可以运算

2.混合

可以引用已经定义的class和id

.clear{
  clear:both;
}
p{
  .clear;
}

编译结果:

p{ clear:both; }

3.传参

可以带默认参数

.border-radius(@width:2px){
  -webkit-border-radius:@width;
  -moz-border-radius:@width;
  border-radius:@width;
}
p{
  .border-radius(10px);
}

多参数情况(形参可用逗号或空格分开)

.border(@width,@style,@color){
  border:@width @style @color;
}
p{
  .border(1px,solid,red);
}

4.嵌套

ul,ol{
  li{
    float: left;
    a{
      color:#000;
      &:hover{
        color:#f00;
      }
    }
  }
}

5.注释

//单行注释
/*多行注释*/

6.选择器

&代表上一级元素

ul{
  li{
    &:hover a{
      background : #f00;
    }
  }
}

编译结果:

ul li:hover a{
  background : #f00;
}