What is the difference between sass and scss

Difference: 1. Sass uses the ".sass" suffix as the extension, while SCSS uses the ".scss" suffix as the extension; 2. Sass is written with strict indentation grammar rules. Without braces "{}" and semicolon ";", the syntax of SCSS is very similar to that of CSS, with braces and semicolons.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

What is Sass

Sass is a meta-language that is higher than CSS. It can be used to describe file styles clearly and structurally, and is more powerful than ordinary CSS. More powerful functions. Sass provides a cleaner, more elegant syntax while providing a variety of features to create maintainable and manageable stylesheets.

Sass is a CSS preprocessing language written in Ruby language. It was born in 2007 and is the largest mature CSS preprocessing language. It was originally designed to work with HAML (an indented HTML precompiler), so it has the same indentation style as HTML. SASS is an extension of CSS3 that adds rule nesting, variables, mixins, selector inheritance, and more. Convert it into standard, well-formed CSS code by using command line tools or WEB framework plug-ins.

Sass official website: http://sass-lang.com

What is Scss

Scss is Sass 3, which introduces new syntax. The abbreviation of Sassy CSS is 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.

The difference between sass and scss

Sass and SCSS are actually the same thing. We usually call it Sass. The differences between the two are as follows: Point:

• The file extensions are different. Sass uses the ".sass" suffix as the extension, while SCSS uses the ".scss" suffix as the extension

• The grammar writing methods are different. Sass is written with strict indentation grammar rules, without braces ({}) and semicolons (;), while the SCSS grammar writing method is the same as our CSS grammar writing method. Very similar.

The following is an introduction to their compilation rules:

<span style="font-size: 18px;">sass</span>Compilation

1. Sass compilation method:

• Command compilation
• Automatic compilation
• GUI tool compilation

Note: "Single file compilation" and "Multiple file compilation".

2. Sass output method:

Output method	When compiling, carry parameters	Reference picture
sass nested output methodnested	sass --watch test.scss :test.css --style nested	Figure 1
sass expanded output methodexpanded	sass --watch test.scss:test.css --style expanded	Figure 2
sass expanded output methodcompact	sass --watch test.scss:test.css --style compact	Figure 3
Sass expansion output methodcompressed	sass --watch test.scss:test.css --style compressed	Figure 4

Screenshot comparison:

In addition to the above introduction, sass can also perform addition/subtraction, multiplication, and division. , variable calculation, number operation, character operation, color operation, etc.

(Learning video sharing: css video tutorial)

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