CSS Preprocessor Practice: Less installation

CSS is not a programming language.

You can use it to develop a Web page style, but you can't program it. In other words, CSS is basically a designer's tool, not a programmer's tool. In the programmer's eyes, CSS is a very troublesome thing. It has no variables, there are no conditional statements, just a line of simple description, it is rather cumbersome to write.

Naturally, someone started adding programming elements to the CSS, which is called the "CSS Preprocessor" (CSS preprocessor). Its basic idea is to use a special programming language, Web page style design, and then compiled into a normal CSS file.

What is less

Less is a boon for WEB developers, with the introduction of variables, Mixin (mixed), arithmetic, functions, and so on in CSS, which greatly simplifies the writing of CSS and reduces the cost of maintaining CSS, as its name says It allows us to do more with less code.

Mixins, here I translated into a mix, but also a lot of friends in the same translation into the mix, whether it is mixing, or mixed. The main idea is to introduce a defined class A into another Class B, so that Class B inherits all of the properties of Class A simply. Parametric, with parameter blending, defines a default value for a parameter in Class A like a function, or a set of parameter attributes, or a @arguments brute, and then introduces the defined Class A into a nested rule nested rules in class B, Refers to nesting another selector in one selector to implement inheritance. This reduces the amount of code and increases the readability of the code. Operations operations, using addition, subtraction, multiplication, and other mathematical operations in CSS, mainly applied to attribute values and color operations, can easily achieve the complex relationship between attribute values. color function, color function, color will first be converted into HSL color space, and then operate at the channel level. namespaces namespace, some variables or mixed modules packaged to better organize the reuse of CSS and property sets, scope scope, first from the local search for variables or mixed modules, if not found, will go to the parent scope to find, until found, This is very similar to the domain of other programming languages; JavaScript evaluation,javascript expressions that use JS expressions in less or sass files to assign values. --Desert
Transfer from: http://www.cn-sass.com/translation/an-introduction-to-less-and-comparison-to-sass.html

Installation

Less installation and sass installation is different, he does not need to rely on the ruby environment, can be directly installed to use. However, the less installation is divided into two types: client and server-side installations.

Client Installation

1. To download a script that you want less.js ;
2. Create a file to place your style, for examplestyle.less
3. Add the following code to your HTML .

<link rel="stylesheet/less" type="text/css " href= "  styles.less"><script src="less.js" type= " Text/javascript "></script>

Note <link> the rel properties. You need to use it after the attribute value, less to /less work. You also need to introduce it after the <link> style sheet <script> . If you're using the "HTML5" syntax, I can't imagine why you wouldn't use it. You can go less type="text/css" and type="text/javascript" .

install less There are two details that require special emphasis, and often many people are here to make a mistake: when you call the less style sheet,the rel attribute of the <link> tag must be stylesheet/less, where/lessis indispensable The Less.js script can only be applied after loading the less-styled <link> . --Desert

Server-side Installation

The use of less on the server side is mainly the help of less compiler, the less source files compiled to generate the final CSS file, the current common way is to use node's Package Manager (NPM) installed less, after successful installation can be in the node environment to compile the less file. As a result, less in the server installation and sass installation is a bit similar, the difference is that they need to depend on the environment is not the same, what is required is the node JS environment, and sass need is the ruby environment, in order to let people know more clearly how to install less on the server side, Here is a simple way to pass the installation process (this article demonstrates the installation method under Window7).

First, go to Node JS's official website to download a suitable installation file for Windows system.

After the installation files are downloaded, install as normal application methods. After the installation is complete, enable the Command Control Panel for node JS in the Start menu:

Start the Nodejs command panel

In the Start Node JS Command Control Panel, enter the following commands directly:

$ NPM Install less

This installs the less compile command, which compiles the less source files properly locally. If you want to download the latest stable version of less, you can also try typing in the command Control Panel of node JS:

$ NPM Install [email protected]

CSS Preprocessor Practice: Less installation