Sass Learning Road (1)--sass Introduction

Sass is a preprocessor language for CSS, similar languages are less,stylus and so on.

So what is a CSS preprocessor?

CSS preprocessor defines a new language, the basic idea is, with a special programming language, for the CSS to add some programming features, CSS as a target to generate files, and then developers just use this language to encode work.

In other words, the CSS preprocessor is a specialized language that is written in this language and then compiled into a normal CSS file.

CSS preprocessor adds programming features to CSS, such as the ability to use variables, functions, and logic.

Advantages of CSS Preprocessor:

You can make your CSS more concise, adaptable, and readable, and the maintenance of your code becomes more convenient.

about SASS:

Quote a description of the Sass official website:

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

Sass, the first CSS preprocessing language, was born in 2007 and was written in Ruby language. More powerful than less, however, the early indentation syntax (SASS's old version syntax, the discard of CSS, the curly braces, etc.) cannot be accepted by the public (cannot imagine the world without curly braces in CSS).

Although the indentation style like HTML can reduce the amount of code, forcing the specification into style, but most of the front-end engineers are difficult to accept the world without curly braces, but sass early and not less popular.

Sass and Scss:

In fact, sass and SCSS are the same kind of things, usually we call scss, but still some differences:

1. The extension names are ". Sass" and ". Scss", respectively.

2. Syntax notation differs: SASS is written in strict indentation syntax, with no braces and no number (line-wrap to solve all problems). And Scss is closer to the way we usually write CSS.

Below are examples of two syntaxes:

Sass syntax

[CSS]View Plain Copy

1. $font-stack: Helvetica, sans-serif//define variables
2. $primary-color: #333//define variables
4. Body
5. font: 100% $font-stack
6. color: $primary-color

SCSS syntax

[CSS]View Plain Copy

1. $font-stack: Helvetica, Sans-serif;
2. $primary-color: #333;
4. Body {
5. font: 100% $font-stack;
6. color: $primary-color;
7. }

The compiled CSS

[CSS]View Plain Copy

1. Body {
2. font: 100% Helvetica, Sans-serif;
3. color: #333;
4. }

In fact, Scss Grammar is a new version of the SASS follow-up syntax, can be understood as a syntactic sugar, no longer adhere to Ruby grammar habits. (The familiar curly braces and seal numbers are back again).

Sass Learning Road (1)--sass Introduction