How to use CSS preprocessor

Sometimes code conflicts may occur in CSS, and variables, arithmetic calculations, etc. cannot be performed. By using the CSS preprocessor, you can write programs such as proximity variables and four-rule calculations. Therefore, the following article will share with you how to use the CSS preprocessor.

Let’s take a look firstWhat is a CSS preprocessor?            

The default CSS is a description that has been impossible to achieve until now, and the CSS preprocessor is to effectively describe CSS things.

However, CSS preprocessors cannot be used in browsers.

Although there are various Sass and Less, it still seems difficult to describe in CSS so far, but it is called a "new CSS extended version".

Main preprocessor types

Sass

Sass is a CSS file that converts scsss, and the extension is ".scss" using variables and formulas added to CSS programming styles.

You can create "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 you can write it hierarchically.

However, if node.js is not installed to use "style.less", "style.css" will not be converted.

Let’s look at a specific example

How to write LESS

HTML

<h1>hello,php中文网！</h1>
<h2>hello,php中文网！</h2>

LESS

@mycolor: blue;
h1 {
    font-size: 30px;
    font-color: @mycolor;
}
h2 {
    font-size: 20px;
    font-color: @mycolor;
}

The browser display effect is as follows:

HTML

<h1>hello,php中文网！</h1>
<h2>hello,php中文网！</h2>

style.css file

h1 {
    font-size: 30px;
    font-color: blue;
}
h2 {
    font-size: 20px;
    font-color: blue;
}

In this case, if you want to change the color, if you want to change 2 h1h2 when all colors are changed, use variables to describe as follows.

@mycolor: blue;
h1 {
    font-size: 30px;
    font-color: @mycolor;
}
h2 {
    font-size: 20px;
    font-color: @mycolor;
}

The above is the detailed content of How to use CSS preprocessor. For more information, please follow other related articles on the PHP Chinese website!