Less简明教程
1.3.2 服务器端使用
阅读(

Less 基础

认识 Less

Less 原理

Less 用法

浏览器端使用

服务器端使用

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

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

安装Less编译器

为了方便使用 Lessc 这个全局命令,建议采用全局安装。安装命令如下:

$ npm install Less -g

如果想安装指定版本,也非常方便,只需在安装包后添加 @VERSION即可。如,安装1.6.2版本的命令如下:

$ npm install Less@1.6.2 -g

当然,如果你想安装最新版本,可以尝试以下命令:

$ npm install Less@latest -g

整个安装过程无需人工干预,安装完成后的结果如图 1‑1 所示:

安装Less编译器
图1-1 安装Less编译器

代码中用法

只要安装了 Less,就可以在Node中像这样调用编译器:

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

经过编译生成的 CSS 代码为:

.class {
  width: 2;
}

你也可以手动调用解析器和编译器:

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

命令行用法

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

$ Lessc styles.less

上面的命令会将编译后的 CSS 输出到 stdout。如果希望将CSS代码保存到指定的文件中,就可以使用以下命令:

$ Lessc styles.less styles.css

上述命令就会将 styles.less 文件编译后的CSS代码保存到 styles.css 文件中。如何你希望编译后得到压缩的CSS,只需提供一个 -x 参数就可以了。命令如下:

$ Lessc styles.less styles.css -x

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验