在 CSS 中使用 LESS 实现更多功能（2）服务器端编译

look_w

服务器端编译到目前为止，我已经向您展示：开发和部署 LESS 便于快速使用浏览器，但却是有代价的。每次页面加载时，编译用的 JavaScript 都运行于用户的浏览器之上，这耗尽了计算资源并减缓了页面加载。如果在浏览器中加载   ，并检查 JavaScript 控制台，则会看到一条消息：“less: css generated in 36ms”。36 毫秒的时间并不算长，但它代表着额外的不必要计算和时间。快速页面加载在 Web 上很重要。
在转入生产模式之后，使用一个服务器端 JavaScript 工具将 LESS 编译到 CSS 中。Node.js 是一个流行选项，被记录在 LESS 站点上。我喜欢使用 Mozilla 的独立 JavaScript 项目 Rhino。要使用 Rhino 和 LESS，请下载并安装 Rhino（参见  ）。将 js.jar 放在一个方便进行构建的位置。您需要一个特殊版本的 less.js，该版本可在 GitHub 完整下载的 LESS 中下载中找到（参见  ）。本文中使用的版本是 less.js-master/dist/less-rhino-1.4.0.js。将 less-rhino-1.4.0.js 放在保存 Rhino JAR 的地方。下面准备将 LESS 代码编译到 CSS 中。
要编译 listing3.less，请切换到 listing3.less 所在的目录并执行以下命令：

1	java -jar js.jar less-rhino-1.4.0.js listing3.less > listing3.css

编译操作会将生成的 CSS 放在 listing3.css 文件中。该文件的内容如下：

1 2 3 4 5

p { color: #ff0000; font-size: 12px; background-color: #008000; }

在 listing3.css 中，LESS 变量被替换，颜色名称被替换为 RGB 形式（比如 red 被替换为 #ff0000 ）。现在您可以按照常用方法将 listing3.css 部署到一台服务器中。
LESS 替代注释语法LESS 的一个小小的增强是，编写单行注释的方式变得简单了。清单 5 显示了来自 W3C CSS 教程的一个标准注释示例：
清单 5. 使用注释的 CSS 示例 (listing 5.css)

1 2 3 4 5

p { color: red; /* This is a comment */ font-size: 12px; }

清单 6 中的 LESS 代码等同于   ：
清单 6. 与使用简化注释的清单 5 等同的 LESS 代码 (listing6.less)

1 2 3 4 5

p { color: red; // This is a comment font-size: 12px; }

  使用的语法对于程序员来说很常见，而且键入起来稍微容易一些。但鉴于处理 LESS 的方式，这种注释并不出现在生成的 CSS 中。如果您想为浏览器查看器保留注释（例如用于版权声明），则必须使用标准的 CSS 注释语法。
W3C 教程其余内容专注于 CSS 选择器语法和常见属性的细节。此时，我要将重心转向 LESS 的更广泛使用，这是大多数 Web 开发人员在实践过程中越来越多遇见的情形。