Detailed explanation of CSS preprocessor Less-HTML Tutorial-php.cn

CSS preprocessor

Why there is a CSS preprocessor

CSS is basically a tool for designers, not programmers. In the eyes of programmers, CSS is a headache. Unlike other programming languages, such as PHP, Javascript, etc., it has its own variables, constants, conditional statements and some programming syntax. It is just a line of pure attributes. Description is quite time-consuming to write, and the code is difficult to organize and maintain.

Naturally, some people began to wonder whether some programming elements could be added to CSS like other programming languages, so that CSS could do some predetermined processing like other programming languages. In this way, there is a "CSS Preprocessor".

What is CSS preprocessor

It is a superset of the CSS language and is more complete than CSS.

CSS preprocessor defines a new language. Its basic idea is: use a specialized programming language to add some programming features to CSS, use CSS as a target to generate files, and then developers Just use this language for coding work.

In layman’s terms, the CSS preprocessor uses a specialized programming language to design Web page styles, and then compiles them into normal CSS files for project use. The CSS preprocessor adds some programming features to CSS without having to consider browser compatibility issues. For example, you can use variables, simple logic programs, functions, etc. in CSS. Some basic features in programming languages allow you to CSS is more concise, more adaptable, more readable, easier to maintain, and many other benefits.

CSS preprocessor technology has been very mature, and many different CSS preprocessor languages have emerged, such as: Sass (SCSS), LESS, Stylus, Turbine, Switch CSS, CSS Cacheer, DT CSS etc. There are so many CSS preprocessors, so "Which CSS preprocessor should I choose?" has become a hot topic on the Internet recently, on Linkedin, Twitter, CSS-Trick, Zhihu and major technical forums , many people are arguing about this. This is a big step forward from where we once were on the subject of whether we should use CSS preprocessors.

So far, among the many excellent CSS preprocessor languages, Sass, LESS and Stylus are the best, with many discussions and comparisons. This article will introduce you to these three CSS preprocessor languages from their background, installation, usage syntax, differences and other comparisons. I believe that front-end development engineers will make their own choice-which CSS preprocessor should I choose?

Introduction to less, less is a popular preprocessing CSS that supports variables, mixes, functions, nesting, loops and other features.

less syntax

Comments

less can have two types of comments.

The first type of comment: template comment

// The comments here in the template comment will be deleted after they are converted into CSS

because less needs to be converted into css before it can be used used in the browser. After converting to css, this kind of comment will be deleted (after all, css does not recognize this kind of comment).

Second type of comment: CSS comment syntax

/* CSS comment syntax is converted to CSS and then retained*/

Summary: If written in less Comments, we recommend writing the first type of comments. Unless it is something similar to copyright, the second type of annotation is used.

Define variables

We can define reused or frequently modified values as variables, and just reference this variable where it needs to be used. This avoids a lot of duplication of work.

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

@Variable name: variable value; //Format @bgColor: #f5f5f5; //Format example

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

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

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

Copy after login

After we compile the above less file into a css file (the next section talks about the compilation of the less file), the automatically generated code is as follows:

main.css： body{ background-color: #f5f5f5;}

Copy after login

Using nesting

Children selectors are often used in css. The effect may be like this:

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

Copy after login

The above code is nested in many layers. It’s tedious to write. But if you use less's nested syntax to write this code, it will be 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; } }}

Copy after login

After compiling the above less file into a css file, the automatically generated code is as follows:

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

Copy after login

I believe you have read these cases After mastering the method, please pay attention to other related articles on the php Chinese website for more exciting content!