How to use CSS preprocessor
This article is about how CSS preprocessors are used. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.
Let's first take a look at what is the CSS preprocessor?
The default CSS is a description that has so far been impossible, and the CSS preprocessor is designed to effectively describe what CSS does.
However, CSS preprocessors cannot be used in browsers.
Although there are all kinds of Sass,Less, it still seems difficult to describe in CSS so far, but it is called "the new extended version of CSS".
Main preprocessor types
Sass
Sass is a CSS file that converts scsss with the extension ".scss" to add variables and formulas to the CSS programming style.
You can create a "style.css" by converting (compiling) the Sass file of "style.scss".
To use it, you must install ruby.
LESS
LESS converts (compiles) LESS files like Sass.
The concept of a variable can be less, so you can calculate it or write it hierarchically.
However, if you do not install node.js to use "style.less", "style.css" will not be converted.
Let's look at specific examples.
How to write LESS
HTML
Hello,php Chinese website!
Hello,php Chinese website!
LESS
@ mycolor:blue
H2 {
Font-size:30px
Font-color:@mycolor
}
H3 {
Font-size:20px
Font-color:@mycolor
}
The browser displays as follows:
2345 Screenshot 20181127113752.png
HTML
Hello,php Chinese website!
Hello,php Chinese website!
Style.css file
H2 {
Font-size:30px
Font-color:blue
}
H3 {
Font-size:20px
Font-color:blue
}
In this case, if you want to change the color, in the case of all discoloration, if you want to change 2 h2h3, use the variable to describe it as follows.
@ mycolor:blue
H2 {
Font-size:30px
Font-color:@mycolor
}
H3 {
Font-size:20px
Font-color:@mycolor
}
Thank you for reading! This is the end of the article on "how to use the CSS preprocessor". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!
