{{less}}给 CSS 加点料

1.安装

在 Node.js 环境中使用 Less ：npm install -g less

 在浏览器环境中使用 Less ：<link rel="stylesheet/less" type="text/css" href="styles.less" />

                                               <script src="https://cdn.jsdelivr.net/npm/less@4" ></script>

2.概览

Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。这里呈现的是 Less 的官方文档（中文版），包含了 Less 语言以及利用 JavaScript 开发的用于将 Less 样式转换成 CSS 样式的 Less.js 工具。

因为 Less 和 CSS 非常像，因此很容易学习。而且 Less 仅对 CSS 语言增加了少许方便的扩展，这就是 Less 如此易学的原因之一。

• 有关 Less 语言特性的详细文档，请参阅 Less 语言特性 章节
• 有关 Less 内置函数的列表，请参阅 Less 函数手册 章节
• 有关详细的使用说明，请参阅 Less.js 用法 章节
• 有关第三方工具的详细信息，请参阅 工具 章节

Less 到底为 CSS 添加了什么功能？以下就是这些新加功能的概览。

2.变量（Variables）

无需多说，看代码一目了然：

@width: 10px;
@height: @width + 10px;

#header {
  width: @width;
  height: @height;
}

编译为：

#header {
  width: 10px;
  height: 20px;
}#header {
  width: 10px;
  height: 20px;
}

3.混合（Mixins） 

 混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法。假设我们定义了一个类（class）如下：

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

 如果我们希望在其它规则集中使用这些属性呢？没问题，我们只需像下面这样输入所需属性的类（class）名称即可，如下所示：

#menu a {
  color: #111;
  .bordered();
}

.post a {
  color: red;
  .bordered();
}

.bordered 类所包含的属性就将同时出现在 #menu a 和 .post a 中了。（注意，你也可以使用 #ids 作为 mixin 使用。）