关于less

[cqupt-yifanwu]

优点

• 结构清晰，便于扩展，对与但也APP经常需要用模块名嵌套来划分不同模块的css，比如 .module .action .list a（当然我们还可以选择其他的方式来避免这个问题，比如cssModules），有了less我们可以写成

  .module {
  　.action {
  　　a, a:hover {
  　　　//styles
  　　}
  　}
  }
  

• 可以方便的屏蔽浏览器私有语法差异
• 可以实现mixin（这样就会提高代码的重用性，而且会便于修改，假设我们要将页面上所有圆角框的大小改变就不需要全部都再改变），这个就是我们设计模式中的Mixin

  .mixin(@heitht: 10px) { // 这里看起来更像是函数，可以传入参数（还可以指定默认值，强大！跟es6的默认参数有点像）
      height: @height
      
  }
  .classA {
      .mixin();
  }
  .calssB {
      .mixin(15px;)  // 这里可以将参数重定义为15px
  }
  

• 还可以实现继承

  .block {
    margin: 10px 5px;
    padding: 2px;
  }
  p {
    .block;/*继承.block选择器下所有样式*/
    border: 1px solid #eee;
  }
  

• 除了可以继承也拥有变量
• 拥有运算功能
• 具有颜色计算的函数，避免巨长的代码LESS文档
• 可以使用条件语句（但是它使用的不是if else而是when）

  .mixin(@height: 10px) when (@height >= 10) { 
   ...
  }
  

• 使用css的语法，容易上手

缺点

• 需要编译（自然会带来一定的花销）
• 不能及时预览，其实就是需要编译
• 会引入额外的文件（浏览器端的可以用这个Less CDN http://cdn.bootcss.com/less.js/1.7.0/less.min.js）

使用

它可以在浏览器和服务端两种环境运行，服务端通过npm下载然后require进来即可，浏览器上直接引入less.js文件即可。下面说一下配合gulp来编译less，直接上代码

```
gulp.task('lessToCss', function() {
    gulp.src('url.less')
    .pipe(sourcemaps.init())  // 生成sourcemap 方便查找
    .pipe(less())
    .pipe(sourcemaps.write('./maps'))
    .pipe(gulp.dest('static/css'));
    gulp.watch('less.scss', ['less']);
});
```

关于sourcemap