less

注释：

以//开头的注释不会被编译到CSS文件中

被/**/包裹的注释会被编译到CSS文件

变量：

使用@来声明一个变量：属性值 @color：gray;属性名 @m:margin;选择器 @selector:#box

• 作为普通属性值来使用：直接使用@color
• 作为选择器和属性名：@{selector}/@{m}的形式（不常用，了解就好）
• 变量延迟加载

延迟加载是当一个作用域的代码全部解析完，才去加载@var

.class{
 @var:1
 m:@var //3
 @var:3
}

嵌套规则：

• 基本嵌套规则
• &的使用

&表示上一级选择器，可用于伪元素

若想表示 .box:hover，直接将:hover嵌套于.box得到的CSS为.box :hover(有空格)

正确写法：

.box{
  &:hover{}
}

混合：

将一系列属性抽取出来，可在任意元素中调用；

1. 普通混合 会在CSS中输出

.base{
  display:absolute;
  100px;
  height:100px;
}//会在编译后的CSS中出现
.box1{
  .base;
}
.box2{
  .base;
}

2. 不输出的混合“（）” 不会存在于CSS中

.base(){
  display:absolute;
  width:100px;
  height:100px;
}//不会在编译后的CSS中出现
.box1{
  .base;
}
.box2{
  .base;
}

3. 带参数的混合

• 可设置默认值
• 当形参与实参个数不一致是，可使用命名参数

LESS文件

.base(@w：50px,@h：50px){//默认值@w: 50 @h: 50
  display: absolute;
  width: @w;
  height: @h;
}
.box1{
  .base(100px,100px);
}
//为传参，使用默认值
.box2{
  .base();
}
//命名参数
.box3{
  .base(@w:200px);
}

CSS文件

.box1{
  width:100px;
  height:100px;
}
.box2{
  width:50px;
  height:50px;
}

4. 模式匹配

LESS文件

.pos(r){
  display: relative;  
}
.pos(a){
  display: absolute;  
}
.pos(f){
  display: fix;  
}
.pos(@_){
  width: 100px;
  height: 80px;  
}
.box1{
  .pos(r); 
  .box2{
     .pos(a);
  }   
}

CSS文件

.box1{
  width: 100px;
  height: 80px;
  display: relative;    
}
.box1 .box2{
  width: 100px;
  height: 80px;
  display: absolute;    
}

运算：

不需要都带单位，有一个带了即可

100px + 10 =>110px