Less学习笔记1

1、介绍

Less是CSS预处理脚本语言，提供了函数、变量、混合（mixin）等功能，方便通过node、浏览器或Rhino环境生成CSS样式表，让CSS更容易维护和使用。但不同文件间的变量并不共享，因为每个文件是独立进行编译的。

2、安装

$ npm install -g less

使用案例

• 生成一个test.less文件，内容如下：

@base: #f938ab;

.box-shadow(@style, @c) when (iscolor(@c)) {
  -webkit-box-shadow: @style @c;
  box-shadow:         @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
  .box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
  color: saturate(@base, 5%);
  border-color: lighten(@base, 30%);
  div { .box-shadow(0 0 5px, 30%) }
}

• 使用lessc编译器编译成css文件

lessc test.less > test.css

• 查看编译后结果

.box {
  color: #fe33ac;
  border-color: #fdcdea;
}
.box div {
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

3、压缩CSS

一般线上的css都对大小很敏感，建议在生产环境使用lessc的压缩插件less-plugin-clean-css进行压缩。插件仓库地址：https://github.com/jakubpawlowicz/clean-css

• 安装插件

npm install -g less-plugin-clean-css

• 压缩

lessc test.less --clean-css="--s1 --advanced --compatibility=ie8" > test.css

• 查看结果

.box{color:#fe33ac;border-color:#fdcdea}.box div{-webkit-box-shadow:0 0 5px rgba(0,0,0,.3);box-shadow:0 0 5px rgba(0,0,0,.3)}

4、在代码中使用

上面的操作都是在shell命令中进行的操作，其实less本身也是js对象，因此可以在node等代码中使用，下面是一个案例：

// 加载less编译器
var less = require('less');

less.render('.class { width: (1 + 1) }', function (e, css) {
  console.log(css);
});

// 以上代码输出:
//.class {
//  width: 2;
//}

// 加载插件
var LessPluginCleanCSS = require('less-plugin-clean-css'),
// 实例化压缩插件对象
var cleanCSSPlugin = new LessPluginCleanCSS({advanced: true});
// 编译并压缩
less.render(lessString, { plugins: [cleanCSSPlugin] })

5、浏览器中使用less

前面的方法都是先进行预编译生成CSS文件，再供给浏览器使用，这种模式适用于生成环境，执行速度快，不占用客户端资源。但对于开发阶段却不一定适用，无法做到所见即所得。

less也可以直接在浏览器中进行解析，如下：

<link rel="stylesheet/less" type="text/css" href="test.less" />
// 给less设置属性，浏览器选项：http://www.runoob.com/manual/lessguide/usage/#using-less-in-the-browser-client-side-options
<script>
  less = {
    env: "development",
    async: false,
    fileAsync: false,
    poll: 1000,
    functions: {},
    dumpLineNumbers: "comments",
    relativeUrls: false,
    rootpath: ":/a.com/"
  };
</script>
<script src="less.js" type="text/javascript"></script>
// 或者CDN方式：<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.7.3/less.min.js"></script>

需要注意的是：

• less文件必须在less.js文件之前
• 多个less文件之间不共享变量
• 如果要给less对象设置属性，必须确保属性对象less在引入less.js之前

6、参考

[1] http://www.runoob.com/manual/lessguide/ 教程
[2] https://www.npmjs.com/package/less-plugin-clean-css 压缩插件