Less语法&基于node\grunt/gulp编译

引入方法一：

<link rel="stylesheet/less" type="text/css" href="styles.less"> 
<script src="less.js" type="text/javascript"></script> 

// 引入less.js,在浏览器中编译less。优点：使用简单，缺点：引入js文件，增加http请求，需要预编译，

引入方法二：

// 基于node、grunt/gulp 时时编译。
less: {
      // 开发环境
      development: {
        options: {
          paths: ["/"]
        },
        files: {
          "css/css.css": "less/css.less" 
        }
      }
}
 
grunt.loadNpmTasks('grunt-contrib-less');
grunt.registerTask('lessDev', ['less:development']); // 注册task

语法：

html { font-size: 0.85rem}
/* demo 1 变量*/
@blue: #5B83AD;
@f12 : 1rem;
p {
    color: @blue;
    font-size: @f12
}
 
/* demo 2 混合 */
.rounded-corners (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  background: #ff0000
}
h1 {
  .rounded-corners;
}
 
/* demo 3 嵌套 */
.test {
  ul { font-size: 1rem; list-style: none; background: #ccc;
      li { color:#000;}
  }
}
 
/* demo 4 函数、运算 */
@the-border: 1px;
#header {
  border-left: @the-border;
  border-right: @the-border * 2;
}