Less是什么
Less是一种动态的样式语言，Less扩展了CSS的动态行为，比如说，设置变量（variables）、混合书写模式（mixins）、操作（operations）和功能（functions）等等，而且Less使用了现有的CSS语法。
疑问：将less转换成CSS需要配置什么？
Less有什么用呢？，直接看下面
变量
注意：在Less中的变量实际上就是一个“常量”，因为它只能被定义一次
Less
@color: #ffffff;
@color: #dddddd;
#header: {
color: @color;
}
Css
#header {
color:#dddddd;
}
上面的代码中很明显的说明了后面的@color覆盖了前面的@color
另外，变量还有计算的功能
混入（Mixins）
混入就是一种嵌套，它允许你将一个类嵌入到另一个类中，而被嵌入的这个类也被称为一个变量。
个人理解：就是你自己行一个类（就当做一个变量吧或者有时候可以认为它是一个带有参数的functions），然后将这个类嵌入到另一个类中当做它的属性
Less
.common(@radius:5px) {
border-radius: @radius;
}
#header {
.common;
}
#footer {
.common;
}
解析成CSS
#header {
border-radius: 5px;
}
#footer {
border-radius: 5px;
}
混入函数还有一个名词叫做“混入参数”，就是说可以接受变量参数
.common(@radius) {
border-radius: @radius;
}
#header {
.common(10px);
}
#footer {
.common(20px);
}
解析成Css
#header {
border-radius: 10px;
}
#footer {
border-radius: 20px;
}
当然也可以不用带参数
嵌套规则
这里需要注意的是，&符号，在Less中嵌套有&解析的是同一个元素或者这个元素的伪类，没有&解析的是后代元素
Less
.content {
.footer {
color: red;
}
&.header {
color: #ffffff;
}
}
解析成CSS
.content .footer{
color: red;
}
.content.header {
color: #ffffff;
}
Function&Operations
注意：Less中的operations主要是针对任何数字、颜色、变量的操作，可以对其加减乘除或者更加复杂的运算。而function主要Color functions
命名空间
上面所说，我们把一些变量或者mixins组织起来，并将它封装，想用的时候把一部分取出来使用。
#bundle {
.button () {
display: block;
border: 1px solid black;
background-color: grey;
&:hover { background-color: white }
}
.tab { ... }
.citation { ... }
}
使用
#header a {
color: orange;
#bundle > .button;
}
变量范围——scope
采用就近原则，也就是说元素先找本省有没有这个变量存在，如果存在，就取得这个变量，不存在则寻找父元素，以此类推
@var: red;
#page {
@var: white;
#header {
color: @var; // white
}
}
#footer {
color: @var; // red
}
总结：上面只是常用的一些功能，less的功能远不仅仅是这些！
