Less简单使用

link rel="stylesheet/less" type="text/css" href="styles.less">

<script src="less.js" type="text/javascript"></script>

注意你的less样式文件一定要在引入less.js前先引入

$ npm install less

变量：

@color: #4D926F;

#header {  color: @color;}
h2 {  color: @color;}

嵌套规则：
#header {  
    h1 {    font-size: 26px;    font-weight: bold;  }  
    p { font-size: 12px;    
        a { text-decoration: none;      
            &:hover { border-width: 1px }    
          }  
    }
}
/* 生成的 CSS */
#header h1 {  font-size: 26px;  font-weight: bold;}
#header p {  font-size: 12px;}
#header p a {  text-decoration: none;}

#header p a:hover {  border-width: 1px;}

&符号代替父级元素

注意 & 符号的使用—如果你想写串联选择器，而不是写后代选择器，就可以用到&了. 这点对伪类尤其有用如 :hover 和 :focus 

.bordered {  

    &.float {    float: left;   }  
    .top {    margin: 5px;   }

}

输出：

.bordered.float {  float: left;  }
.bordered .top {  margin: 5px;}