CSS preprocessor: Adds programming features to CSS in a specialized programming language, uses CSS as a target file, and then developers can just code in that language. Problems with CSS: the syntax is not powerful enough, such as the inability to write nested writing, resulting in the need to write a lot of repetitive selectors in modular development; The absence of variables and a reasonable style reuse mechanism makes it difficult to maintain logically related attribute values that must be repeatedly printed as literals. Therefore, the preprocessor is required to provide the style layer reuse mechanism missing CSS, reduce redundant code, and improve the maintainability of style code.

Currently, the three most popular processors are Less, Sass, and Stylus.

Comparison of application of Sass, LESS and Stylus

Comparison of installation methods

1. The installation of sass

You are advised to install Ruby on a C disk. During the installation, select “Add Ruby Executables to Your PATH”. After ruby is successfully installed, start the Ruby Command control panel. Enter the gem install sass command and press Enter. Sass is automatically installed

2. The installation of Less

There are two types of installation: client side and server side.

A. the client

Simply load a Javascript script file named “less. Js” on the official website and add the following code to the HTML we need to import from the less source file:

<link rel="stylesheet/less" type="text/ CSS "href=" file path /styles.less"> <script SRC =" file path /less.js" type="text/javascript"></script>Copy the code

B. the server

Install LESS using Node’s package manager (NPM). Once installed, LESS files can be compiled in the Node environment.

Install the Node first. After the installation is successful, launch the Node Command panel and enter the Command

$ npm install less

Less is automatically installed after you press Enter

3. The installation of the Stylus

The installation of Stylus is similar to the installation of LESS on the server, starting with Node. Enter the Command in Node’s Command panel:

$ npm install stylus

Press Enter to install the stylus automatically

Convert Sass, LESS and Stylus into CSS files for comparison

1. Convert sass to CSS files

Start by creating an Sass file in your project, in this case naming it “style.scss”, and place it in the corresponding project style

Launch Ruby’s Command panel and find the Sass file you want to translate

Enter the following command in the corresponding directory:

sass style.scss style.css
sass --watch style.scss:style.css
Copy the code

An automatic “style. CSS” file is generated and the corresponding CSS style file is automatically updated

2. Convert Less to a CSS file

Translate using its own commands in the installed Node JS environment.

$ lessc style.less

The command above will pass the compiled CSS to stdout, which you can save to a file:

$ lessc style.less > style.css

3. Convert the Stylus to A CSS file

Stylus is executable, so it can transform itself into CSS. Stylus can read output from “stdin” to “stdout”, so Stylus can translate source files like the following:

$ stylus –compress  <some.styl> some.css 
Copy the code

Stylus also, like Sass, accepts translations of both individual files and entire directories. For example, a directory named CSS will compile and output a. CSS file in the same directory.

$ stylus css  
Copy the code

The following command will output to “./public/stylesheets “:

$stylus CSS -- Out public/stylesheetsCopy the code

You can also translate multiple files simultaneously:

$ stylus one.styl two.styl 
Copy the code

If you have Firebug installed on your browser, you can use the FireStylus extension.

$stylus - firebug < path >Copy the code

Third, the comparison of the treatment of variables

1. Processing method of Less variable

Less: Variable processing – Lazy loading. All Less variables are calculated based on the last defined value of the variable. Less

@size: 10px; .box { width: @size; } @size: 20px; .ball { width: @size; } output:.box {width: 20px; } .ball { width: 20px; } 2, Stylus variable handle style = 10px. Box width: size size = 20px. Ball width: size } .ball { width: 20px; }Copy the code

2. Variable processing of Sass

Sass handles variables in the same way as Stylus, and the output value of a variable is calculated based on the last previous definition. This actually represents two ideas: Less tends to be closer to the declarative style of CSS, and the calculation process weakens the call timing; The Sass and Stylus are more directive.

If you introduce a third-party style library into Less, you can change the style by reconfiguring variables

Advantages: Treatments like Stylus and Sass are less susceptible to multiple third-party library variable name conflicts because a variable cannot affect the output style before it is defined

4. CSS rear processor

The CSS post-processor processes the CSS and generates the CSS preprocessor, which belongs to the CSS preprocessor in the broad sense

Examples: CLEAN-CSS,Autoprefixer(based on browser-supported data on Can I Use to handle compatibility issues automatically)

Autoprefixer:

Standard CSS is as follows:

.container {
display: flex;
}
.item {
flex: 1;
}

Copy the code

Compatibility processing is as follows:

.container {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.item {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
Copy the code

Advantages: Use Css syntax, easy to modularize, close to the future standard of Css Disadvantages: limited logic processing power Framework example PostCss: is a tool based on JS plug-in conversion style. PostCSS plug-ins can be like preprocessors, they can optimize and Autoprefix code; Future syntax can be added; You can add variables and logic; Can provide a complete grid system; You can provide shortcuts to code and so on

Original address [: blog.csdn.net/weixin_4535…]