Shulou(Shulou.com)06/02 Report--

This article mainly introduces the differences between sass and scss, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

Differences: 1, Sass is with the ".sass" suffix as the extension, while SCSS is with the ".scss" suffix as the extension; 2, Sass is written in strict indentation grammar rules, without braces "{}" and semicolon ";", while SCSS grammar writing and CSS grammar writing style is very similar, with braces semicolon.

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

What is Sass?

Sass is a meta-language higher than CSS. It can be used to describe file styles clearly and structurally. It has more powerful functions than ordinary CSS. Sass provides a more concise and elegant syntax while providing a variety of functions to create stylesheets that can be maintained and managed.

Sass is a CSS preprocessing language written in Ruby. 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 indented style as HTML. SASS is an extension of CSS3, adding rule nesting, variables, mixing, selector inheritance, and so on. Convert it to 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 a new syntax introduced by Sass 3, short for 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 features of Sass. That is, any standard CSS3 stylesheet is a valid SCSS file with the same semantics. In addition, SCSS can recognize most CSS hacks (some CSS tricks) and browser-specific syntax, such as the old IE filter syntax.

Because Scss is an extension of CSS, all code that works in CSS also works in Scss. That is, 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 instructions, are consistent; the only difference is that SCSS requires semicolons and curly braces instead of line breaks and indents.

The difference between sass and scss

Sass and SCSS are actually the same thing. We usually call them Sass. There are two differences between them:

The file extension is different, Sass has the suffix ".sass" and SCSS has the suffix ".scss" as the extension

Grammar writing is different. Sass is written with strict indentation grammar rules, without curly braces ({}) and semicolons (;), while SCSS grammar writing is very similar to our CSS grammar writing.

Here are some of their compilation rules:

Compilation of sass

1. The method of sass compilation:

Command compilation

Automatic compilation

GUI tool compilation

Note: "single file compilation" and "multiple file compilation".

2. Sass output method:

When compiling with parameter reference drawing, sass nested output mode nestedsass-- watch test.scss:test.css-- style nested diagram 1sass unfold output mode expandedsass-- watch test.scss:test.css-- style expanded diagram 2sass unfold output mode compactsass-- watch test.scss:test.css-- style compact diagram 3sass unfold output mode compressedsass-- watch test.scss:test.css-- style compressed figure 4

Screenshot comparison:

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

Thank you for reading this article carefully. I hope the article "what is the difference between sass and scss" shared by the editor will be helpful to you. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.