CSS 彻底改变了 Web 页面的设计，但 CSS 仍然是静态的，而且在其句法发展方面受到限制。这些限制是有目的且合乎情理的，鼓励广泛加以实现。但开发人员和设计人员常常发现 CSS 使用起来很单调乏味。许多 Web 框架包含一些工具，这些工具使得人们更容易使用更灵活的特性创作 CSS，然后将结果编译成静态 CSS，以便部署到站点。最近的一些项目更侧重于创建旨在编译到 CSS 中的语言。Alexis Sellier 的开源项目 LESS 是这类语言中最受欢迎的一种语言。
LESS 在现有 CSS 语法之上添加了一些开发人员熟悉的特性，比如变量、mixins、运算符和函数。可以使浏览器中的 JavaScript 或通过服务器端 JavaScript 工具集的预处理将 LESS 编译到 CSS 中。LESS 在其他各种工具集中也得到了广泛应用，包括 JavaScript 的流行 Bootstrap 项目。在本文中，我要介绍的是 LESS（尤其是 1.4 版本），LESS 是为现代网站编写可读性的、可维护的 CSS 的一种方式。参见 部分，获取本文的示例代码。
入门下载最新版 LESS（撰写本文之时是 1.4；参见 ）。然后准备学习其语言。万维网联盟 (W3C) 在其维基中提供了一些用于学习 CSS 的资料。我基本上遵循该教程的顺序，因此，如有需要的话，您可以一前一后学习基本的 CSS 和 LESS。
清单 1 再现了 W3C 教程的第一个示例：
清单 1. 基本 CSS 示例 (listing1.css)1
2
3
4
5
| p {
color: red;
font-size: 12px;
background-color: green;
}
|
清单 2 中的 HTML 将 中的 CSS 投入使用：
清单 2. 引用清单 1 的基本 CSS 示例的 HTML (listing2.html)1
2
3
4
5
6
| <head>
<link rel="stylesheet" type="text/css" href="listing1.css">
</head>
<body>
<p>This is a paragraph</p>
</body>
|
图 1 显示了 Mac OS X 上 Safari 浏览器中显示的 listing2.html：
图 1. 使用清单 1 中的 CSS 的浏览器输出 删除魔法值看到 的开发人员很可能立刻注意到那些违反开发者本能的内容，即硬编码到 CSS 中的值，这些值有时被揶揄为 “魔法值 (magic value)”。LESS 中最重要的特性之一是变量。清单 3 是使用变量的一个 LESS 基本示例版本：
清单 3. 使用 LESS 中的变量的基本 CSS 示例 (listing3.css)1
2
3
4
5
6
7
8
9
| @main-text-color: red;
@main-text-size: 12px;
@main-text-bg: green;
p {
color: @main-text-color;
font-size: @main-text-size;
background-color: @main-text-bg;
}
|
不是语法正确的 CSS，因此您不能在 HTML 中将 listing1.css 替换为 listing3.less 。您还必须更新主机 HTML 来调用 JavaScript 编译器，如清单 4 所示：
清单 4. 引用基本 CSS 示例 LESS 版本的 HTML (listing4.html)1
2
3
4
5
6
7
| <head>
<link rel="stylesheet/less" type="text/css" href="listing3.less">
</head>
<body>
<p>This is a paragraph</p>
<script src="less.js" type="text/javascript"></script>
</body>
|
请注意，在 中，我将 script 标记放在页面 body 的结尾处。传统上，大多数开发人员将 script 标记放在 head 中。但将它们放在 body 中是合法的，这利用了这样一个事实（引用自 HTML 4 规范），即 “script 元素按照加载文档的顺序进行求值”。如今许多站点在临近结束时都有一些脚本，因此主要内容的加载不会因为任何脚本处理而延迟。 |
