How did the CSS preprocessor come about? What can it do? What benefits will it bring?

Speaking of CSS, we are certainly familiar with the use of HTML page layout when we need to use CSS for style writing. CSS, as anyone who has studied it knows, is not a programming language. You can style web pages with it, but you can’t program with it. CSS is just a simple line of property descriptions that can be quite cumbersome to write, and the code is hard to organize and maintain.

So it’s natural for people to think, can we add some programming elements to CSS like any other programming language, so that CSS can do some pre-programmed processing like any other programming language? Hence the CSS Preprocessor.

The concept of a CSS preprocessor is to use a specialized programming language to add programming features to CSS. CSS is used as a target file, and then developers can only code in that language.

Advantages of using CSS preprocessor: CSS preprocessor adds some programming features to CSS, without considering browser compatibility problems can use variables, simple logic programs, functions and other basic features in the programming language. Make your CSS simpler, more adaptable, more readable, and easier to maintain.

Three commonly used CSS preprocessors in detail

So far, CSS preprocessor technology has been very mature, and there are many different CSS preprocessor languages. This article explains the best and most commonly used sass, less, and Stylus.

Variables used by less must start with @


@mainColor: #963;
@siteWidth: 1024px;
@borderStyle: dotted;

/* Call the variable */                            |  /* Translated CSS*/
----------------------------------------+-------------------------------
body {                                  |  body {
  color: @mainColor;                    |    color:#963;
  border:1px @borderStyle @mainColor;   |    border:1px dotted #963; max-width: @siteWidth; | max-width:1024px; } |}Copy the code

Sass uses variables that must start with $


$mainColor: #963;
$siteWidth: 1024px;
$borderStyle: dotted;
 
/* Call the variable */                              |  /* Translated CSS*/
------------------------------------------+------------------------------
body {                                    |  body {
  color: $mainColor;                      |    color: #963;
  border:1px $borderStyle $mainColor;     |    border:1px dotted #963; max-width: $siteWidth; | max-width: 1024px; } |}Copy the code

The stylus uses variables to declare variables without qualifying (@ cannot be applied) endings; optional


$mainColor: #963; $siteWidth: 1024px; $borderStyle: dotted; mainColor = #963;
siteWidth = 1024px;
$borderStyle = dotted;
 
/* Call the variable */                            |    /* Translated CSS*/
----------------------------------------+--------------------------------
body                                    | body {
  color mainColor                       |   color: #963;
  border 1px $borderStyle mainColor     |   border:1px dotted #963max-width siteWidth | max-width:1024px; |}Copy the code

Scope variables: Variables are searched in the local definition first. If they are not found, they are searched in the superior definition, and then they are searched globally. Sass: no global variable The following value overwrites the previous value when a variable’s value is repeatedly declared. Less: Looks for the locally defined variable first. If none is found, look up to the root (global stylus: same as less)

Comparison of the three

Sass, LESS and Stylus have variables, scope, mixing, nested, color, function, inheritance, operators, the basic features, such as import and comments and “variables”, “hybrid”, “nest” and “inheritance” and “color function” known as the five basic characteristics, their respective characteristics of similar functionality, but differ in their use of rules.

Sass and LESS have strict and rigorous syntax while Stylus has a looser syntax. LESS is easier to learn because it is more like the CSS standard. 2. The functions of each feature are basically similar, but the rules of use are different; Sass and Stylus have similar language processing capabilities, such as conditional statements and loop statements, while LESS needs to simulate these capabilities with keywords like When, which is a bit inferior.

So much for this article on CSS preprocessors. I hope this article is helpful if you don’t know which compiler to use. See you in the next article!