1、是一个预编译的css，在浏览器中要编译为css才能使用。给css提供了计算、变量、函数等等功能。安装less的工具此时就能编译less
$ cnpm install -g less
此时就能使用lessc命令了，c表示compile。
比如我们创建一个1.less：
@a : 100px;
div{
width : @a;
height: @a * 2;
}
header{
.logo{
float:left;
}
.logo1{
float:left;
}
}
输入命令： lessc 1.less 1.css
就会翻译为：
div {
width: 100px;
height: 200px;
}
header .logo {
float: left;
}
header .logo1 {
float: left;
}
语法：@表示定义变量
混合：
.fll{
float:left;
margin-right:10px;
}
.logo{
width:100px;
height:100px;
.fll
}
.logo2{
width:100px;
height:100px;
.fll
}
嵌套：
header{
.logo{
float:left;
}
.logo1{
float:left;
}
}
计算：
width:100px * 9;
&表示自己：
.btn{
color:red;
&:hover{
color:blue;
}
&:visited{
text-decoration: underline;
}
}
导入：
@import "1.less";
@import "2.less";
@import "3.less";
循环：
.generate-columns(100);
.generate-columns(@n, @i:1) when (@i =< @n) {
.a-@{i}{
width: @i * 1px;
}
.generate-columns(@n, (@i + 1));
}
命名空间：总的类名设置完成之后使用的时候用{}来使用
@BECanlendar_box_className : .BECanlendar;
@resultWidth : 300px;
@height : 26px;
@chooseBox : 500px;
@bordercolor : #9e9e9e;
@{BECanlendar_box_className}{
margin :10px;
width :@resultWidth;
position: relative;
font-family: "微软雅黑";
}