Sass, SCSS, and CSS relationships

When it comes to CSS, I believe we all know that CSS styles are used to modify the structure of page pages. So what does sass and Scss do? Let's take a look at the next step.

To understand the relationship between CSS, SACC, and Scss, start with the CSS preprocessor.

What is a CSS preprocessor? CSS preprocessor is a special language for the design of Web pages, after being compiled into a normal CSS file for the project to use.

the benefits of using CSS to preprocess languages : CSS is more concise, easy to modify, readable, adaptable to new and easier to maintain code.

The relationship between CSS and sass:

Sass is a CSS preprocessing language written by the Buby language, and the same strict indentation style as HTML, and CSS writing specifications have a large discrepancy, is not using curly braces and semicolons, so it is not widely accepted.

The relationship between Sass and Scss:

Sass and Scss are actually the same CSS preprocessing language, with prefix names of. Sass and. Scss, respectively. Two.

Sass the suffix named. Sass before version 3.0, and the suffix after version 3.0. Scss.

The two are different, following sass after the scss of the writing specification is basically consistent with CSS, the Sass era is strict indentation specification and no ' {} ' and '; '. The SCSS is consistent with the CSS specification.

Example code:

Sass

#sidebar width:30% Background-color: #faa

Scss

#sidebar {width:30%; Background-color: #faa;}

There is no difference between SCSS and CSS:

SCSS and CSS are no different, which is one of the reasons why Sass is becoming popular. Simply put, modify your existing ". css" file directly to ". Scss" to use.

Sass, SCSS, and CSS relationships