如何在 Ubuntu VPS 上使用 LESS CSS 预处理器

About LESS

LESS is a CSS pre-processor that lets you create stylesheets in a much more efficient and intelligent manner than using simple flat CSS. It provides a number of dynamic components that will make your code smaller, more reusable and more scalable. Its syntax is fairly easy to understand and rather adds on top of regular CSS than replaces it.

There are 2 main ways you can use LESS: server-side or client-side. The first one needs Node.js to compile to css, whereas for the second case you need to download a javascript file and include it on your page. This second way is not really recommended for production sites, but has a development oriented watch-mode that you should check out if you are interested.

In this tutorial, we will see how you can install LESS and get started using it on the server-side. For this, it assumes you are already running your own VPS with Ubuntu and a web server installed (if you want to see something in the browser). Additionally, you will have to install Node.js and NPM (Node Package Manager). If you don't have them already, follow the steps outlined in this tutorial to get set up.

Installation

So assuming you have Node.js and NPM all set up, we can run the following command to install LESS:

npm install -g less

Once installed on your VPS, you can use the command line to instruct LESS to compile less files to .css. To try it out, go to your web server's document root (defaults to /var/www in Apache) and create a .less file:

nano /var/www/test.less

Inside this file paste the following css declaration (note that LESS language is basically css with some great additions on top):

#box {
  color:red;
}

To have LESS compile this file to css and output the result in the terminal, run the following command:

lessc /var/www/test.less

You should see the results printed in your terminal window. To have this output written to a .css file (more of a common scenario), specify also a file destination:

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

This will create production ready minified css. For more information about the options you can pass to LESS commands, visit this page or run the lessc command without any parameters.

The LESS language

那么为什么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:

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 .box element).

Nesting:

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.

Operations:

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.

Functions:

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 saturate() function will perform a 5% saturation on the color property of the .box element. For more information about what functions you have available in LESS, you can visit this reference page.

Importing:

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 base.less 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.

Conclusion

在文章中,我们看到了使用LESS来更好地管理和使用你的样式表的一点力量. 我们已经看到如何在服务器侧安装和使用它,并一窥它给普通cs带来的语言改进. 鼓励您在<a href=>http://less.github.io/index.html>官方LESS网站上读取更多内容,并更多地了解您可以做的所有事情。 <br / *_BR / > 另外,如果你感兴趣,有可用的GUI应用程序可以帮助您在计算机上与 LESS 右侧工作. 这也包括将.less文件编译为cs. 您可以在 Windows 和 Mac 上找到像 Crunch 或 Mixture 这样的交叉平台编译器,但也可以为特定的平台找到。您可以检查它们<a href='https://github.com/less/less.js/wiki/GUI-compillers- That-use-LESS.js>> 这里

备选地,我还鼓励您检查另一个受欢迎的CSS预处理器Sass. 有<a href='https://www.digitalocean.com/community/articles/how-to-set-up-on-your-vps-running-on-ubuntu>上的""数字海洋,可以让你从这个开始.
</>

Article Submitted by: Danny