less笔记

Less 的使用方法

Less 能够直接在浏览器端运行（支持IE6+、Webkit、Firefox），也能够借助Node.js或者Rhino在服务端运行。

Less是一种动态语言，不管是在浏览器端，仍是在服务器端运行，最终仍是须要编译成 CSS，才会发挥其做用。

浏览器端使用

在浏览器端直接使用Less，浏览器会直接为页面应用编译后的CSS样式，而不是生成单独的CSS文件。

在浏览器端直接使用Less，须要一个脚本的支持，这个脚本就是Less.js，它Less解析器，能够在浏览器端把 .less 文件解析成CSS样式。你能够从 http://Lesscss.org下载最新版本的Less.js。

浏览器端使用Less，只需两步：

第一步，引入 .less 文件。

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

能够看出，Less 源文件与标准 CSS 文件的引入方式彻底相同，只是在引入 .less 文件时，要将 rel 属性设置为“stylesheet/less”。

第二步，引入Less.js文件。

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

须要特别注意的是：

1）.less 样式文件必定要在 Less.js以前引入，这样才能保证 .less 文件被正确编译。

2）因为浏览器端使用Less时，是使用 ajax 来拉取 .less 文件，若是直接在本机文件系统打开（即地址是file://开头）或者是有跨域的状况下，会拉取不到 .less 文件，致使样式没法生效。所以，必须在http(s)协议下使用，即必须在服务器环境下使用。

3）还有一种状况容易致使样式没法生效，就是部分服务器（以IIS居多）会对未知后缀的文件返回404，致使没法正常读取 .less文件。解决方案是，在服务器中为 .less 文件配置MIME值为 text/css。一种更简单的方法，就是直接将 .less 文件更名为 .css 文件便可。

在开发阶段，在页面中嵌入一个 Less.js 将Less在线编译成CSS样式，确实很方便。可是，在线编译会产生加载延迟，即使在浏览器中有不足一秒的加载延迟，也会下降性能。若是Javascrip执行错误，还会引发美观问题。所以，在生产环境中，并不推荐这种方式，而是推荐在服务器端使用Less。

服务器端使用

在服务器端使用Less，须要借助于 Less 的编译器，由它将 Less 源文件编译成最终的 CSS 文件。最经常使用方式，就是利用 node 的包管理器 (npm) 进行安装，安装成功后就能够在 node 环境中对Less源文件进行编译。

安装Less编译器

为了方便使用 Lessc 这个全局命令，建议采用全局安装。安装命令以下：

1. $ npm install Less -g

若是想安装指定版本，也很是方便，只需在安装包后添加 @VERSION便可。如，安装1.6.2版本的命令以下：

1. $ npm install Less@1.6.2 -g

固然，若是你想安装最新版本，能够尝试如下命令：

　　1. $ npm install Less@latest -g
如图：

代码中用法

只要安装了 Less，就能够在Node中像这样调用编译器：

1. var Less = require('Less');
2. Less.render('.class { width: 1 + 1 }', function (e, css) {
3.     console.log(css);
4. });

通过编译生成的 CSS 代码为：

1. .class {
2.   width: 2;
3. }

你也能够手动调用解析器和编译器：

1. var parser = new(Less.Parser);
2. parser.parse('.class { width: 1 + 1 }', function (err, tree) {
3.     if (err) { return console.error(err) }
4.     console.log(tree.toCSS());
5. });
　　　　


　　命令行用法

1. 也可使用命令行，将 Less文件编译成静态的CSS文件，而后在HTML文档中直接引入CSS文件，而不是Less文件。只需将命令行切换到 styles.less 文件所在的目录，并执行 Lessc 命令便可。命令以下：

   1. $ Lessc styles.less

   上面的命令会将编译后的 CSS 输出到 stdout。若是但愿将CSS代码保存到指定的文件中，就可使用如下命令：

   1. $ Lessc styles.less styles.css

   上述命令就会将 styles.less 文件编译后的CSS代码保存到 styles.css 文件中。如何你但愿编译后获得压缩的CSS，只需提供一个 -x 参数就能够了。命令以下：

   1. $ Lessc styles.less styles.css -x

下面为转换效果：左侧为less代码，右侧为编译转换成的css