What is scss?

Sass is a mature, stable, and powerful CSS preprocessor. It is an upgraded version of Sass. Its syntax is fully compatible with CSS3 and inherits the powerful functions of Sass. Any standard CSS3 stylesheet is a valid SCSS file with the same semantics.

(Recommended tutorial: CSS video tutorial)

What is Scss

Scss is a new syntax introduced by Sass 3. It is the abbreviation of Sassy CSS and a superset of CSS3 syntax, which means that all valid CSS3 styles are also suitable for Sass. To put it bluntly, Scss is an upgraded version of Sass. Its syntax is fully compatible with CSS3 and inherits the powerful functions of Sass. That is, any standard CSS3 stylesheet is a valid SCSS file with the same semantics. In addition, SCSS can also recognize most CSS hacks (some CSS tricks) and browser-specific syntax, such as the ancient IE filter syntax.

Since Scss is an extension of CSS, all code that works properly in CSS will also work properly in Scss. In other words, for a Sass user, you only need to understand how the Sass extension works to fully understand Scss. Most extensions such as variables, parent references, and directives are the same; the only difference is that SCSS requires semicolons and braces instead of newlines and indentation.

Similarities and Differences between Scss and Sass

Sass and Scss are actually the same thing. We usually call it Sass. The main differences between the two are the following two Points:

1. The file extensions are different. Sass uses the “.sass” suffix as the extension, while Scss uses the “.scss” suffix as the extension.

2. The grammar writing method is different. Sass is written with strict indentation grammar rules, without braces ({}) and semicolon (;), while the grammar writing of Scss is the same as our CSS The grammar is written in a very similar way.

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

The above is the detailed content of What is scss?. For more information, please follow other related articles on the PHP Chinese website!