如何使用LESS CSS预处理器的Ubuntu VPS-系统运维-优客志

关于LESS

LESS是CSS预处理器，让您以更高效和智能的方式比使用简单的平面CSS样式表的创建。它提供了许多动态组件，这将使您的代码更小，更可重用和更具可扩展性。它的语法相当容易理解，而是添加在常规CSS之上，而不是替换它。

有两种主要方式可以使用LESS：服务器端或客户端。第一个需要Node.js编译为css，而对于第二个case，你需要下载一个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

现在，您将有一个新的.css文件，其中包含.less文件中编译的css语句。

如果希望LESS还缩小生成的css，请将以下选项添加到命令：-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;
}

将编译为：

#white-box {
  color: #fff;
}

因此，您可以定义类似颜色的东西，然后轻松地在您的样式表中重复使用它们。

混合：

混合是为了重用现有的样式声明。一旦声明它们，您就可以在样式表中重复使用它们。
例如，像这样：

.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%);
}

的饱和()函数将在.box的元素的颜色属性进行5％的饱和度。有关哪些函数，你必须在更短的可用的更多信息，你可以访问此页面引用。

输入：

LESS允许您构造样式表并在逻辑上组织它们。您可以创建包含相关代码的多个文件，然后将它们一个导入另一个。您可以使用以下语句执行此操作：

@import "base";

这将包括所有你驻留在同一文件夹作为要从中导入该文件的文件base.less作出的声明。这样，你将有可用的变量和mixins无论你想要什么。需要注意的一点是，如果您不指定文件扩展名，LESS将自动将导入的文件视为.less文件。如果要导入一个简单的.css文件，您可以指定扩展名，并将被相应地处理。如果指定了任何其他扩展名，它将再次被视为.less文件。

结论

在本文中，我们已经看到了使用LESS更好地管理和使用样式表的强大功能。我们已经了解了如何在服务器端安装和使用它，并看一下它对常规css带来的语言改进。我们鼓励您宣读了更多的官方网站LESS和了解更多有关你可以用它做的事。

此外，如果您有兴趣，有可用的GUI应用程序，可以帮助您在您的计算机上使用LESS。这还包括将.less文件编译为css。你可以找到类似于Crunch或Mixture的跨平台编译器在Windows和Mac上同时工作，但也可以用于特定平台。您可以检查出来这里。

或者，我还鼓励你看看另一个流行的CSS预处理器Sass。有一个关于DigitalOcean教程，可以让你与启动。

文章提交者：丹尼