Talk about 3 types of preprocessors in css

This article will introduce you to three types of CSS preprocessors, and compare them to understand the differences between them. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

1. Introduction

The CSS preprocessor defines a new language. The basic idea is to use a specialized Programming language, developers only need to use this language for coding work, which reduces the boring process of writing CSS code. At the same time, it can make your CSS more concise, more adaptable, more readable, and more hierarchical. Obvious, easier code maintenance and many other benefits.

There are many types of css preprocessors. The three mainstream css preprocessors are Less, Sass (Scss) and Stylus; their respective backgrounds are as follows:

Sass: born in 2007, the earliest The most mature CSS preprocessor, with support from the ruby ​​community and compass, the most powerful css framework.

Currently influenced by LESS, it has evolved to SCSS that is fully compatible with CSS (SCSS requires the use of semicolons and braces instead of line breaks and indents).

Less: Appeared in 2009. It is greatly influenced by SASS, but it also uses CSS syntax, making it easier for most developers and designers to get started. It has far more supporters outside the ruby ​​community than SASS.

The disadvantage is that compared to SASS, it has insufficient programmable functions.

However, the advantage is that it is simple and compatible with CSS, which in turn has influenced the evolution of SASS into the era of SCSS. The famous Twitter Bootstrap uses LESS as the underlying language.

Stylus: Produced in 2010, from the Node.js community.

is mainly used to provide CSS preprocessing support for Node projects. It has certain supporters in this community, but in a broad sense its popularity is not as good as SASS and LESS.

2. Comparison

The most important thing before using CSS preprocessor is to understand the syntax. Fortunately, the syntax of most preprocessors is basically the same as that of CSS. almost.

First of all, both Sass and Less use standard CSS syntax, so if you can easily convert existing CSS code into preprocessor code, Sass uses the .sass extension by default, while Less uses . less extension.

h1 {
  color: #0982C1;
}

This is a very common one, but Sass also supports the old syntax, which does not include curly braces and semicolons:

h1
  color: #0982c1

And Stylus supports more syntax To be more diverse, it uses the file extension of .styl by default. The following is the syntax supported by Stylus:

/* style.styl */
h1 {
  color: #0982C1;
}
 
/* omit brackets */
h1
  color: #0982C1;
 
/* omit colons and semi-colons */
h1
  color #0982C1

You can use different variables in the same style sheet. For example, the following writing method will not report an error:

h1 {
  color #0982c1
}
h2
  font-size: 1.2em

Related recommendations:

2020 front-end vue interview questions summary (with answers)

vue tutorial Recommended: The latest 5 vue.js video tutorial selections in 2020

For more programming-related knowledge, please visit:Introduction to Programming! !

The above is the detailed content of Talk about 3 types of preprocessors in css. For more information, please follow other related articles on the PHP Chinese website!