What is a CSS preprocessor

The MDN document defines a CSS preprocessor as a program that allows you to generate CSS using the preprocessor’s own syntax.

It’s a mouthful to say, but in short, native CSS doesn’t cut it, you develop it in a higher level language, and then compile it into the underlying language so it can actually run. This is the CSS preprocessor, which brings CSS, an ancient language, back to life.

The main preprocessor languages are Sass, Less, and Stylus.

2. Superpowers of CSS preprocessors

See article

3. The difference between Sass and SCSS

SCSS is a new syntax introduced by Sass 3. Its syntax is fully compatible with CSS3 and inherits the powerful functions of Sass. They are essentially the same thing. SCSS is an upgraded version of Sass.

Apart from the file suffix, the only difference is:

Sass uses “indentation” instead of “curly braces” to indicate that an attribute belongs to a selector, and “newline” instead of a semicolon to separate attributes:

//Sass
#sidebar
  width: 30%
  background-color: #faa
Copy the code

SCSS requires semicolons and curly braces instead of line breaks and indentation:

//SCSS
#sidebar {
  width: 30%;
  background-color: #faa;
}
Copy the code

SCSS is insensitive to whitespace. The above code could also be written like this:

#sidebar {width: 30%; background-color: #faa}
Copy the code