一、Less基础使用！

因只是做关于less的基础归纳，采用的是 koala编译软件进行的编译处理；另也可以用浏览器或者node进行编译处理！

koala编译软件处理方法：

1、下载 koala  软件（http://koala-app.com/index-zh.html）

2、将需要编译的less文件夹载入 koala  软件中

3、引入经过 koala  软件编译之后的css文件

注：关于 koala的详细使用方法可参考本博客《koala软件使用方法》

二、Less中的变量！

@变量名：定义的值

//编译前
@widt_100:100px;
@widthADD:@widt_100+100px;
.box1{
    width:@widt_100
}
.box{
    width:@widthADD
}
//编译后
.box1 {
  width: 100px;
}
.box {
  width: 200px;
}

注：上方代码片段中定义里两个变量分别是@widt_100和@widthADD；

@widt_100定义的值为100px

@widthADD定义的值为@widt_100的值+100px；即为100px+100px

三、Less中的混合

开发中我们常遇到相同的代码在不同的地方多次运用，或者某些定义的class在之后的样式中被多次运用。

简单的来说，我们在一个class中调用之前已经定义过的一个class中的样式！

编译前
//混合
//基础使用
.border{
    border: #f00 solid 5px;
}
.box{
    .border
}
//带参数
.border1(@width){
    border:#f00 solid @width
}
.box1{
    .border1(10px)
}
//参数带初始值
.border2(@width:20px){
    border:#f00 solid @width
}
.box2{
    .border2()
}
.box2{
    .border2(10px)
}
编译后
.border {
  border: #f00 solid 5px;
}
.box {
  border: #f00 solid 5px;
}
.box1 {
  border: #ff0000 solid 10px;
}
.box2 {
  border: #ff0000 solid 20px;
}
.box2 {
  border: #ff0000 solid 10px;
}

四、嵌套

嵌套是使用最为频繁的，在样式定义中，我们经常会这么写#div p span；释义为找到id为div下的p标签下得span标签

在正常编写中需要我们将每一层次都写的很清楚，这也就决定了代码量的加大！

less中的嵌套便能很大程度的节约代码量和逻辑关系！

编译前
//嵌套
#div{
    height: 100px;
    p{//#div中P标签样式设定
        color: green;
        span{//#div p span中背景设置
            background: aquamarine;
        }
    }
}
编译后
#div {
  height: 100px;
}
#div p {
  color: green;
}
#div p span {
  background: aquamarine;
}

less的出现极大程度上简化了我们的工作量，也更加方便我们对样式进行管理。