What is a CSS preprocessor?

As far as CSS itself is concerned, this is not a problem for most Web front-end practitioners. People who have studied CSS know that it is not a programming language. You can use it to develop a Web page style, but you can't use it to program. In other words, CSS is basically a designer's tool, not a programmer's tool. In the eyes of the programmer, CSS is a 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 attribute description, write a considerable amount of trouble, and code difficult to organize and maintain.

Naturally, someone began to think, can give CSS like other program language, add some programming elements, so that CSS can be like other programming languages can do some scheduled processing. In this way, there is the "CSS preprocessor" (CSS).

CSS Preprocessor

Defined:

The CSS preprocessor defines a new language, with the basic idea of adding some programming features to CSS in a specialized programming language, creating files for CSS as a target, and then developers just use that language for coding.

In layman's parlance, the CSS preprocessor uses a specialized programming language for WEB page styling and then compiles it into a normal CSS file for use by the project. The CSS preprocessor adds some programming features to CSS, no need to consider browser compatibility issues, such as you can use variables in CSS, simple logic programs, functions (such as the right code Editor in the use of variable $color) and so on in the programming language some of the basic features, you can make your CSS More concise, more adaptable, more readable, easier code maintenance and many other benefits.

Other CSS Preprocessor languages:

CSS preprocessor technology is already very mature, and many different kinds of CSS preprocessor languages are emerging, such as:

• Sass (SCSS)
• Less
• Stylus
• Turbine
• Swithch CSS
• CSS Cacheer
• DT CSS

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 have been arguing about Linkedin, Twitter, Css-trick, awareness-calling and various technical forums." This has been a big improvement over the topic of whether we should use CSS preprocessor.

So far, in many excellent CSS preprocessor language is Sass, less and Stylus the best, the discussion is also many, the contrast is also many.

1. $color: Red;
3. . Test {
4. Color: $color;
5. }

Execution results:

1. . Test {
3. color:red;
4. }