less 相关文档及工具 - dongyuwei/blog GitHub Wiki

less是对现有css的扩展语言，它支持variables（注意less中变量也有作用域，类似js语言中变量的查找顺序）, mixins（不好翻译，自己理解吧，类似ruby语言中的模块mixin）, operations（加减乘除等操作） and functions（可复用的函数）. less 有助于css的模块化和复用。bootstarp就是基于它来做模块化设计的（请参考bootstrap源码），业界有需要bootstrap的皮肤，都是稍微修改一些变量和函数，就可以做到。

除了bootstrap，推荐看看腾讯工程师yuanyan写的 https://github.com/yuanyan/pre 这个less小框架，其分类很明晰。

  1. less github wiki https://github.com/cloudhead/less.js/wiki/_pages

  2. less online parser：http://less.cnodejs.net/ 可在线预览less代码编译后的css。

  3. 注意，less不会自动排除重复的@import 引用（less or css）。@import-once 可用于只加载一次。

  4. less的@import可以出现在less源码的任意位置，而css的@import只能出现在css文件开头部分。参见一个issues提案讨论https://github.com/cloudhead/less.js/issues/484 所以使用@import混合引用less和css，编译出来的结果很可能是不合预期的。需要预处理步骤。最好的方法是避免混合引用，统一使用less来引入，这样解析出来的顺序就不会乱。

  5. lessc编译less或者css文件时，使用@import 引入的.css后缀文件会被保留，需要额外处理才能把该css文件内容合并进来。see https://github.com/cloudhead/less.js/issues/303 我这个脚本（https://github.com/dongyuwei/ria-packager/blob/master/lib/css/combineOne.js#L138）可以自动合并@import的css。

  6. 安装less编译器（需要先安装nodejs）：npm install -g less

  7. 使用lessc source destination --compress (--compress 选项 会生成压缩版css，可用于线上发布环境。)

  8. less中也可以直接写js。 以和 包含的就会被当成js代码来解析。lessc是nodejs写的，实现这个功能很easy：

.mask-gradient(@args){
    @arg: `@{args}.trim()`;
    -webkit-mask: e(%("-webkit-%s", @arg));
    -moz-mask: e(%("-moz-%s", @arg));
    mask: e(%("%s", @arg));
}
.demo{
     .mask-gradient(' 20 ')
}

会编译成

.demo {
  -webkit-mask: -webkit-20;
  -moz-mask: -moz-20;
  mask: 20;
}
  1. less不能识别的css规则可以转义： https://github.com/cloudhead/less.js/issues/1116 ，如：
div {
    background: url('/path/to/image.png') left center / contain no-repeat;
}

lessc 解析时会报错，可以使用~" "转义:

div {
    background: ~"url('/path/to/image.png') left center / contain no-repeat";
}