CSS Preprocessor's less detailed

This article was originally published in the blog Park and continues to update the front-end series on GitHub. Follow me on GitHub, get started and go to the advanced front.

The following is the text.

Why CSS preprocessor should have CSS preprocessor

CSS is basically a designer's tool, not a programmer's tool . In the programmer's eyes, CSS is a very headache, it is not like other programming languages, such as PHP, JavaScript, and so on, have their own variables, constants, conditional statements and some programming syntax, just a line of simple property description, write up a lot of trouble, and the code is difficult to organize and maintenance.

Naturally, someone began to think, can you give CSS, like other programming languages, to add some programmatic elements, so that CSS can be like other programming languages can do some scheduled processing. In this way, there is a "CSS preprocessor".

What is a CSS preprocessor

• is a superset of the CSS language, more plump than CSS.

CSS preprocessor defines a new language, the basic idea is: with a special programming language, for the CSS to add some programming features , CSS as a target to generate files, and then developers just use this language to encode work.

In layman's terms,CSS preprocessing uses a specialized programming language for Web page style design, and then compiles the normal CSS file for use by the project. CSS preprocessor adds some programming features to CSS, regardless of browser compatibility issues, such as you can use variables in CSS, simple logic programs, functions and so on in the programming language of some basic features, you can make your CSS more concise, more adaptable, more readable, It is easier to maintain code and many other benefits.

CSS preprocessor technology is already very mature, but also has emerged a lot of different CSS preprocessor language, such as:Sass (SCSS),less, Stylus, Turbine, swithch css, CSS cacheer, DT CSS and so on. So many CSS preprocessor, then "what kind of CSS preprocessor should I choose?" "It has also become a hot topic on the Web recently, and many people are arguing about LinkedIn, Twitter, Css-trick, know-how and the big technology forums. This has been a big improvement over the topic of whether we should use CSS preprocessor.

So far, in a number of excellent CSS preprocessor language is Sass, less and stylus the best , the discussion is also more, more contrast. This article will be from their background, installation, use of grammar, similarities and differences in a few contrast to introduce you to the three CSS preprocessor language. I believe the front-end development engineer will make his own choice-which CSS preprocessor I would like to choose.

Introduction to Less

Less is a popular preprocessing CSSthat supports variables, mixes, functions, nesting, looping, and so on.

• Website

• Chinese web (less document)

• Less documentation for the bootstrap website

• Recommended article: Http://www.w3cplus.com/css/less

Syntax comment for less

There can be two types of comments for less.

First Comment: template comment

  // 模板注释 这里的注释转换成CSS后将会删除

Because less is converted to CSS in order to be used in the browser. After converting to CSS, this comment is deleted (after all, CSS does not recognize this comment).

The second kind of comment: CSS comment syntax

/* CSS 注释语法 转换为CSS后让然保留 */

Summary: If you write a comment in less, we recommend writing the first comment. The second type of comment is used unless it is similar to copyright.

Defining variables

We can define repeated or frequently modified values as variables, and reference the variable where it is needed. This avoids a lot of repetitive work.

(1) In the less file, define the format of a variable:

@变量名: 变量值;        //格式@bgColor: #f5f5f5;      //格式举例

(2) At the same time, refer to this variable in the less file.

Finally, the complete code for the less file is as follows:

Main.less:

// 定义变量@bgColor: #f5f5f5;// 引用变量body{    background-color: @bgColor;}

When we compile the less file above as a CSS file (the next part of the compilation of less files), the automatically generated code is as follows:

MAIN.CSS:

body{    background-color:#f5f5f5;}

Using nested

The descendant selectors are often used in CSS, and the effect may be this:

.container{  width:1024px;}.container.row{  height:100%;}.container.row{  color:#f40;}.container.row a:hover{  color:#f50;}

The code above is nested in a lot of layers and it's tedious to write. If you write this code in less nested syntax, it's more concise.

Examples of nesting are as follows:

Main.less:

.container {  width: @containerWidth;  > .row {    height: 100%;    a {      color: #f40;      &:hover {        color: #f50;      }    }  }  div {    width: 100px;    .hello {      background-color: #00f;    }  }}

After compiling the above less file as a CSS file, the following code is generated automatically:

Main.css

. Container {    Width: 1024px;}. Container>. Row {    Height: 100%;}. Container>. RowA{    Color: #f40;}. Container>. RowA: Hover {    Color: #f50;}. ContainerDiv{    Width: 100px;}. ContainerDiv. Hello {    Background-color: #00f;}

Mixin

Mixin's role is to put the duplicated code into a class, each time the reference to the class name, you can refer to the inside of the code, very convenient.

(1) Define a class in the less file: (Place duplicate code in a custom class)

/* 定义一个类 */.roundedCorners(@radius: 5px) {  -moz-border-radius: @radius;  -webkit-border-radius: @radius;  border-radius: @radius;}

In the above code, in the first line, the contents of the parentheses are the parameters: This parameter is the default value .

(2) Refer to the above class in the less file:

#header {  .roundedCorners;}#footer {  .roundedCorners(10px);}

In the above code, the reference in the header has no parameters, indicating that the parameter is the default value, and that the reference in the footer has parameters, then use this parameter.

Import

In the development phase, we can put different styles into multiple files and finally merge them by @import. This means that when multiple less files are present, they are referenced.

This is good to understand, CSS files can have a lot of, less files can also have a lot of.

(1) Define a referenced less file, named _button1.less :

_button1.less:

.btn{  line-height: 100px;  color: @btnColor;}

PS1: The quoted less file, which we used to underline earlier, indicates that it is part of the file .

PS2: _button1.less You can reference main.css the custom variable in the.

(2) in the main.css reference above _button1.less : (the second line of code)

MAIN.CSS:

@btnColor: red;@import url(`_button1.less:‘);    //这里的路径写的是相对路径body{  width: 1024px;}

After compiling the above main.less to MAIN.CSS, the following code is generated automatically:

.btn{    line-height:100px;    color:red;}{    width:1024px;}

Built-in functions

There are some built-in functions in less, here are the two built-in functions, lighten and darken.

Main.less:

body {  background-color: lighten(#000, 10%);   // 让黑色变亮 10%  color: darken(#fff, 10%);               // 让白色变暗 10%}

After compiling the above main.less to MAIN.CSS, the following code is generated automatically:

MAIN.CSS:

{  background-color:#1a1a1a;  color:#e6e6e6;}

If there is anything that you do not understand, you can look at the API documentation and attach the link in the second paragraph above.

Direct reference to Less.js in index.html

• One: After you finish writing the less file, compile it as a CSS file and then reference the CSS file in your code.

• Procedure two: Use the reference less file directly in the code.

Product on-line, of course, is the use of one, because the practice of two will be more time to compile.

You can use practice two when developing or demonstrating a demo.

In this paragraph, let's talk about practice two, in fact, the browser in the local online to convert less files to a CSS file.

(1) Download less.js file on less official website:

Put the downloaded file in the Lib folder of the project file:

(2) Introducing less.js and our own main.less in index.html. The location is as follows:

The code for the Copy Red Box section is as follows:

    <link rel="stylesheet/less" href="../main.less">

We can see the effect through the console in the Open Web page:

Note that we're going to open the HTML file in the server, otherwise, we won't see the effect.

And here's what we've been told:

It is not recommended to introduce less to the page, because less needs to be compiled, so you will need to introduce a less.js, an HTTP request, and when the browser disables JS your style will not work, and it should be compiled automatically on the server or using grunt.

Project files: (in the project file, I quoted the less.js version is 2.5.3)

• 2018-02-27-lessdemo.rar

Reference Links:

• Know | How less files are introduced into the page

Compilation of Less

Less compilation refers to the writing of less files into a CSS file.

Less compilation, depends on the NodeJS environment. Therefore, we need to install NodeJS first.

1. Install node. js

Go to node. JS's official website to download the installation package:

Install it all the way next.

After the installation is complete, configure the environment variables:

Append the installation path to the PATH variable: ;C:\Program Files\nodejs . Restart the resource manager to take effect.

PS: I found that I installed the node. JS v8.9.4 version and have automatically added environment variables.

On the cmd command line, enter node.exe -v to view the version of node. js.

2, install less of the compilation environment

Unzip the npm.zip and copy the extracted files to the path C:\Users\smyhvae\AppData\Roaming\npm :

Then restart the Resource Manager (or restart your computer). Input in cmd lessc , if you can see the following effect, the less compiled environment installation success:

If you are using a Linux system, you can enter the following command to install:

    npm install -g less

3. Compile the less file as a CSS file

Under the path of less, enter lessc xxx.less to compile successfully. Or, if the input lessc xxx.less > ..\xx.css , represents the output to the specified path.

My public number.

Want to learn soft skills Beyond the code ? You may wish to follow my public number: Life team (ID: vitateam ).

Sweep, you will discover another new world, and it will be a beautiful surprise:

CSS Preprocessor's less detailed