一.定义
1.浏览器只会认HTML，css，JavaScript;而完全不认识less；所以在写less后要对它进行编译，让浏览器认识他。
2.less特点：语法简单
3.使用less的三种方法：
（1）在node中使用；
（2）在浏览器的环境中使用less
（3）可以使用客户端（koala工具）
（补充：在less文件是以.less结尾的插件）
二.less的语法
1.定义变量 ——@后加变量名：
@testwidth：100px;
div{
width:@testwdith;
}
(变量名可以被调用)——补充：less支持双斜线注释，但是编写css的时候会自动过滤掉
2.混合（mixins）
ul{
div;（ 可以直接把上面定义好的变量拿来用）
}
3.带参数混合（象函数一样定义一个参数的属性集合）
.border-radius（@radius）{
.border-radius：@radius；
}
.header{
.border-radius（5px）——实参转入
}
还可以给参数设置默认值
.border-radius（@radius；5px）;
4.匹配模式（它相当于但又不完全是JS中的if，只有满足条件后才能匹配）
- 定义一些浮动方向的样式：
// 传参 r ，对应 右浮 ；
.flo(r){
float: right;
}
// 传参 l ，对应匹配 左浮动；
.flo(l){
float: left;
}
5.嵌套规则
ul{
width：300px;
height：300px;
li{
(在ul标签中嵌套一个li标签)
}
}
6.符号&；
在元素中使用&符号就表示元素本身
a {
color: red;
text-decoration: none;
&:hover {// 有 & 时解析的是同一个元素或此元素的伪类，没有 & 解析是后代元素
color: black;
text-decoration: underline;
}
}
7.运算：
@num：30px;
.d{
width:100px +@num （有一个带单位即可）
}（width：130px）
8.避免编译
示例如下
.left,.right{
float: left;
height: 300px;
}
.left{
width: 300px;
background-color: #f00
}
.right{
不想被编译，拿给浏览器进行运算
width: ~"calc(100% - 300px)";//calc这个运算是给浏览器运算的，不是运算好的
background-color: #0f0;
}
通过calc函数来让浏览器进行运算
