#LESS#review

1. variables
   变量是延迟加载的，在使用前不一定要预先声明。在同一作用域即可使用。

@nice-pink:#F2D1D6;
@mycontainer: container;
@myurl:"../img";
.@{mycontainer}{
    backgroud:url(@{myurl}/a.png);
}
/*编译*/
.container{ backgroud:url(../img/a.png);}

2. mixins
   

   .my-boder{border:1px solid black;} .other-boder{.my-boder;} ----编译后--- .my-boder {border: 1px solid black;} .other-boder {border: 1px solid black;}

3. Nested rules
   

   ``

content{

color: #eee;
.sec{
    color: #ccc;
    a{
        color: #dedede;
        &:hover{color:#ddd;}
            &:after{content:""}
    }

}
}
----编译后---

content {color: #eee;}

content .sec {color: #ccc;}

content .sec a {color: #dedede;}

content .sec a:hover {color: #ddd;}

content .sec a:after {content: "";}

``

4. Media query bubbling&nested media queries
   选择器将被复制到媒体查询体内。

#content{
    color: #eee;
    @media screen{
    margin: 20px;
        .sec{
            @media (min-width:600px) {
                color: #ccc;
                a{
                    color: #dedede;
                    &:hover{color:#ddd;}
                     &:after{content:""}
                }
            }
        }
    }
}
/*----编译后---*/
#content {
  color: #eee;
}
@media screen {
  #content {
    margin: 20px;
  }
}
@media screen and (min-width: 600px) {
  #content .sec {
    color: #ccc;
  }
  #content .sec a {
    color: #dedede;
  }
  #content .sec a:hover {
    color: #ddd;
  }
  #content .sec a:after {
    content: "";
  }
}

5. operations
6. functions
   Less 提供了许多用于转换颜色，处理字符串和进行算术运算的函数。
7. Namespaces and Accessors
   命名空间和访问器
8. Scope

@var: red;
#page { 
    #header { color: @var; // white } 
    @var: white;
}

9. Comments

10. Importing

11. Extend？？？

extend是一个Less伪类，它会合并它所在的选择其和它所匹配的引用。从本质上将extend会查找编译后的CSS，而不是原始的less。

nav ul { 
    &:extend(.inline); 
    background: blue;
}
.inline {color: red;}
/*----编译----*/
nav ul {background: blue;}
.inline,nav ul {
  color: red;
}

12. Loops

在Less中，混合可以调用它自身。这样，当一个混合递归调用自己，再结合Guard表达式和模式匹配这两个特性，就可以写出循环结构。

.loop(@counter) when (@counter > 0) {
    .loop((@counter - 1)); // 递归调用自身            
     width: (10px * @counter); // 每次调用时产生的样式代码
}
div { .loop(5); // 调用循环}
/*----编译----*/
div {
  width: 10px;
  width: 20px;
  width: 30px;
  width: 40px;
  width: 50px;
}