概念

less是一款比较流行的预处理CSS，支持变量、混合、函数、嵌套、等特点。
中文官网

less的两种使用方法

1.安装环境

• 安装node.js （在部分win8系统中无法安装，解决办法是利用cmd安装执行）
• 启动cmd 运行 npm install -g less
• 等待安装完成,然后输入 lessc -v 输出版本号即安装成功
  2.直接下载less.js文件并引入你的html中即可
  注意：这种方式必须在http协议下运行，因为本质上less.js是通过ajax请求了less文件，进行编译。

缺点：

1. 需要多引入一个less.js文件

2. 需要多一次http请求，file协议打开无效

3. 如果浏览器禁用了js，那么无法生效

4. 线上编译，可能出现短暂的css混乱

<!--第一步，引入less文件-->
<link rel="stylesheet/less" href="01.less">
<!--第二部：引入less.js文件-->
<script src="less.js"></script>

less的语法

• @变量名:值

@wjs_color:#e92322;
body {
  background-color: @wjs_color;
}

div {
  width: 400px;
  height: 400px;
  border: 1px solid @wjs_color;
}

• mixin混入

//不带参数
.btn_base() {
  width: 200px;
  height: 50px;
  background-color: pink;
}

.btn_border() {
  border: 2px solid #000;
}
.btn {
  .btn_base();
  .btn_border();
}

//带参数
.btn_border(@width) {
  border: @width solid #000;
}
.btn {
  .btn_border();//报错
  .btn_border(10px);//不报错
}

less嵌套

.father {
  font-size: 12px;
  //子代选择器
  >.son1 {
    font-size: 14px;
  }
  //后代选择器
  .son2 {
    font-size: 16px;
  }

  //&表示自己
  &::before {
    content:'';
    font-size: 11px;
  }
}

less运算与函数

div {
  width: 100%/6;
  height: 500px * 2;
}

.col(@num){
  width: 100%/12 * @num;
}

.col-1 {
  .col(1);
}
.col-2 {
  .col(2);
}
.col-3 {
  .col(3);
}
.col-4 {
  .col(4);
}

更多内容可以参考