如何在UbuntuVPS上使用LESSCSS预处理器
关于少
LESS 是一个 CSS 预处理器，它可以让您以比使用简单的平面 CSS 更高效、更智能的方式创建样式表。 它提供了许多动态组件，可以使您的代码更小、更可重用和更可扩展。 它的语法相当容易理解，而不是在常规 CSS 之上添加而不是替换它。
您可以通过两种主要方式使用 LESS：服务器端或客户端。 第一种需要 Node.js 编译成 css，而第二种需要下载一个 javascript 文件并将其包含在您的页面中。 第二种方式并不真正推荐用于生产站点，但具有面向开发的监视模式，如果您有兴趣，应该检查一下。
在本教程中，我们将了解如何安装 LESS 并开始在服务器端使用它。 为此，它假设您已经在运行您自己的 VPS 并安装了 Ubuntu 和 Web 服务器（如果您想在浏览器中查看某些内容）。 此外，您必须安装 Node.js 和 NPM（节点包管理器）。 如果您还没有 '，请按照 本教程 中概述的步骤进行设置。
安装
所以假设你已经设置了 Node.js 和 NPM，我们可以运行以下命令来安装 LESS：
npm install -g less
在您的 VPS 上安装后，您可以使用命令行指示 LESS 将较少的文件编译为 .css。 要试用它，请转到您的 Web 服务器 ' 的文档根目录（在 Apache 中默认为 /var/www）并创建一个 .less 文件：
nano /var/www/test.less
在此文件中粘贴以下 css 声明（请注意，LESS 语言基本上是 css，顶部有一些很棒的补充）：
#box {
color:red;
}
要让 LESS 将此文件编译为 css 并在终端中输出结果，请运行以下命令：
lessc /var/www/test.less
您应该会在终端窗口中看到打印的结果。 要将此输出写入 .css 文件（更常见的场景），还要指定文件目标：
lessc /var/www/test.less > /var/www/test.css
Now you'll have a new .css file containing the compiled css statements from the .less file.
If you want LESS to also minify the resulting css, add the following option to the command: -x
lessc /var/www/test.less > /var/www/test.css -x
这将创建生产就绪的缩小 css。 有关可以传递给 LESS 命令的选项的更多信息，请访问 此页面 或不带任何参数运行 lessc 命令。
LESS 语言
那么为什么 LESS 如此出色，您应该尝试一下而不是简单的 css 吗？ 下面我们将看看其中的几个原因。
变量：
使用 LESS，您可以在 CSS 中使用变量。 例如：
@white: #fff;
#white-box {
color: @white;
}
Will compile to:
#white-box {
color: #fff;
}
So you can define stuff like colors once and then easily reuse them across your stylesheets.
混合：
Mixins are for reusing existing style declarations. Once you declare them, you can reuse them across your stylesheets.
For example, something like this:
.shape {
size: 100%;
padding: 20px;
}
.box {
.shape;
background-color: red;
}
Will compile to:
.box {
size: 100%;
padding: 20px;
background-color: red;
}
So the first declaration is a mixin - in this case more like a complex variable - the value of which then we insert in another declaration (that of the 。盒子 element).
嵌套：
Another cool thing is that you can nest declarations. For instance:
.box {
color: red;
.box-inner {
max-width: 80%
}
}
Will compile to:
.box {
color: red;
}
.box .box-inner {
max-width: 80%
}
So instead of having repetitions in our code, we nest everything together logically.
操作：
With LESS, you can easily perform operations on numbers and variable values. For instance:
@length: 10px + 20;
.box {
width: @length / 2;
}
Will output the following css:
.box {
width: 15px;
}
So LESS can transform units into numbers and perform calculations. This applies also to colors and you can do some really cool and dynamic stuff right in your stylesheets.
职能：
LESS comes with some predefined functions that you can use to manipulate the aspect of HTML elements in your stylesheets. For instance:
.box {
color: saturate(#398bce, 5%);
}
The 饱和（） function will perform a 5% saturation on the color property of the 。盒子 element. For more information about what functions you have available in LESS, you can visit 这个参考页.
输入：
LESS allows you to structure your stylesheets and organise them logically. You can create multiple files that contain relevant code and then import them one in another. You can do this with the following statement:
@import "base";
This will include all the declarations you made in the 无基数 file that resides in the same folder as the file you are importing from. This way you will have available variables and mixins wherever you want. One thing to note is that if you donít specify a file extension, LESS will treat the imported file as a .less file automatically. If you want to import a simple .css file, you can specify the extension and will be treated accordingly. If any other extension is specified, it will be treated again as a .less file.
结论
在本文中，我们看到了使用 LESS 更好地管理和使用样式表的强大功能。 我们已经了解了如何在服务器端安装和使用它，并瞥见了它为常规 css 带来的语言改进。 我们鼓励您从 官方 LESS 网站 阅读更多内容，并了解更多关于您可以使用它做的所有事情。
此外，如果您有兴趣，可以使用可用的 GUI 应用程序来帮助您在计算机上使用 LESS。 这还包括将 .less 文件编译为 css。 你可以找到像 Crunch 或 Mixture 这样的跨平台编译器，它们既适用于 Windows 和 Mac，也适用于特定平台。 你可以在这里查看它们。
另外，我也鼓励您查看 Sass，另一个流行的 CSS 预处理器。 DigitalOcean 上有一个 教程可以帮助您入门。
文章提交者：Danny
