Less的简单使用

1.定义变量

@color = #DC3545;

2.样式复用

(1) 无参数

.box{
  color:@color;
  font-size:15px;
}
.layout{
  .box; /*复用.box的样式*/
}

(2) 带参数

.box(@r:10px){
  color:@color;
  font-size:@r;
}
.layout{
  .box; /*不传入参数默认是10px*/
  /*  .box(15px);  */
}

3. 样式嵌套

.layout{
  background-color:@color;
  div{
    //...
  }
  > div{
    //...
    li{
      //...
	}
  }
  a{
    &:hover{
      //...
    }
  }
  .slider{
    &::before{
      //...
    }
  }
}

4.less转css

配置nodejs环境，安装npm，通过npm安装lessc，lessc可将less文件转换成css文件。

5. 直接在项目中使用less文件

直接在项目中使用less文件是无法被识别的，想要这么做可以在项目中引入 less.js 插件。
直接在项目中使用less还有一个好处就是less文件可以通过@import导入其它less文件，从而达到良好的复用效果。