---

那么，为什么 LESS 如此出色，你是否应该尝试使用它来代替简单的 css？下面我们将看看几个原因。

变量：

使用 LESS，你可以在 css 中使用变量。例如：

@white: #fff;

#white-box {
  color: @white;
}

将编译为：

#white-box {
  color: #fff;
}

这样，你可以一次定义颜色等内容，然后在整个样式表中轻松复用它们。

混合（Mixins）：

混合用于复用现有的样式声明。一旦声明它们，你就可以在整个样式表中复用它们。
例如，像这样：

.shape {
  size: 100%;
  padding: 20px;
}

.box {
  .shape;
  background-color: red;
}

将编译为：

.box {
  size: 100%;
  padding: 20px;
  background-color: red;
}

因此，第一个声明是一个混合——在本例中更像是一个复杂变量——它的值将被插入到另一个声明中（.box 元素的声明）。

嵌套：

另一个很酷的功能是你可以嵌套声明。例如：

.box {
  color: red;
  .box-inner {
    max-width: 80%
  }
}

将编译为：

.box {
  color: red;
}
.box .box-inner {
    max-width: 80%
}

因此，我们不是在代码中重复，而是逻辑地将一切嵌套在一起。

运算：

使用 LESS，你可以轻松对数字和变量值执行运算。例如：

@length: 10px + 20;

.box {
  width: @length / 2;
}

将输出以下 css：

.box {
  width: 15px;
}

因此，LESS 可以将单位转换为数字并执行计算。这也适用于颜色，你可以在样式表中直接做一些非常酷炫和动态的东西。

函数：

LESS 带有一些预定义函数，你可以使用它们来操作样式表中 HTML 元素的样式。例如：

.box {
  color: saturate(#398bce, 5%);
}

saturate() 函数将对 .box 元素的 color 属性执行 5% 的饱和度调整。有关 LESS 中可用函数的更多信息，你可以访问此参考页面。

导入：

LESS 允许你结构化你的样式表并逻辑地组织它们。你可以创建多个包含相关代码的文件，然后在一个文件中导入另一个文件。你可以使用以下语句来实现：

@import "base";

这将包含你在同一文件夹中 base.less 文件中做出的所有声明。这样，你就可以在任何地方使用变量和混合。请注意，如果你没有指定文件扩展名，LESS 会自动将导入的文件视为 .less 文件。如果你想导入一个简单的 .css 文件，可以指定扩展名，它将被相应处理。如果指定了任何其他扩展名，它将再次被视为 .less 文件。

结论

---

在本文中，我们看到了使用 LESS 来更好地管理和使用样式表的强大功能。我们看到了如何在服务器端安装和使用它，以及它为普通 css 带来的语言改进。我们鼓励你从官方 LESS 网站阅读更多内容，并了解更多你可以用它做的事情。

此外，如果你感兴趣，还有一些 GUI 应用程序可以帮助你在计算机上直接处理 LESS。这也包括将 .less 文件编译为 css。你可以找到跨平台的编译器，如 Crunch 或 Mixture，它们同时适用于 Windows 和 Mac，但也有特定平台的编译器。你可以在这里查看它们。

另外，我也鼓励你查看 Sass，另一个流行的 CSS 预处理器。有关于它的教程可以帮助你入门。