Shulou(Shulou.com)06/01 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.