What is Sass and what is the difference between it and scss?

Sass on the official website is this description of Sass:

Sass is a meta language that is higher than CSS, and it can be used to describe file styles clearly and structurally, and has more powerful functions than ordinary CSS.
Sass can provide a more concise and elegant syntax, while providing a variety of features to create a maintainable and managed style sheet.

Sass Past Life :

Sass is the earliest CSS preprocessing language, there are more powerful features than less, but the first indent syntax (Sass old version syntax, which is described in detail later in the course) is not acceptable to the public, but with its powerful features and the strong push of Ruby on Rails, there are many developers who choose Choose the Sass.

Sass is a CSS preprocessing language written in Ruby language, which was born in 2007 and is the largest mature CSS preprocessing language. It was originally designed to match the HAML (an indented HTML preprocessor), so it has the same indented style as HTML.

Why earlier than less popularization?

Although indented style can effectively reduce the amount of code, mandatory coding style, but it is not accepted for most programs, on the other hand, can not be compatible with existing CSS code. This is also Sass although appear earliest, but far inferior to less popularization of reason.

What's the difference between Sass and scss?

Sass and Scss are actually the same thing, we usually call it Sass, the difference between the two have the following two points:

1. The file name extension is different, Sass is extended with the ". Sass" suffix, and scss is the ". Scss" suffix to the extension
2. Unlike grammar writing, Sass is written with strict indentation syntax rules, with no curly braces ({}) and semicolons (;), while scss syntax writing is very similar to the way our CSS syntax is written.

Let's take a look at an example:

Sass syntax

$font-stack:helvetica, Sans-serif  //define variable
$primary-color: #333//define variable

body
  font:100% $font-stack
  Color: $primary-color

SCSS syntax

$font-stack:helvetica, Sans-serif;
$primary-color: #333;

Body {
  font:100% $font-stack;
  Color: $primary-color;
}

Compiled CSS

Body {
  font:100% Helvetica, Sans-serif;
  Color: #333;
}