The study of SASS

I haven't had much contact with Sass before, and then I saw this magical thing seen in the CSS precompiled processor in a front-end knowledge system structure diagram written by Daniel.
In fact, although not how to hear it before, but used, you really do not believe, before the NetEase internship in a senior in and I wrote a GitHub pages project, recommended me
The use of MCSs (this is written by the great god NetEase another CSS pre-compiler, of course, did not know what this is a thing, Baidu did not), MCSS and sass principle are the same,
And it has the same grammatical rules:

Links and differences between 1.sass and SCSS
Originally, Sass was part of another preprocessor Haml [1], and Haml was designed and developed using Ruby, whose syntax is a ruby-like syntax, with no curly braces and double quotes, and more importantly, he has strict indentation rules, as long as there is a wrong indent in one place, Will not let you compile through, example:
$font-stack:helvetica, Sans-serif//define Variables
$primary-color: #333//define Variables

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

And Scss is introduced from the third version, the full name of the sassy CSS, abbreviated to SCSS, its syntax is very close to the CSS we use, for example:
$font-stack:helvetica, Sans-serif;
$primary-color: #333;

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

2. That is to say, Scss is the sass and premium version. So why do we use SCSS for the following reasons:
(1) CSS has always been as a beautification of the language of the page, sass in the CSS added to the elements, so that CSS has become a language with programming ideas
(2) It is clear that the relationship between the parent element and the child element, that is, to reduce the CSS in order to limit the child elements, before the child elements with a large number of parent elements, such as the following SCSS code:
#button {
width:400px;
Text-align:center;
Background:purple;

a{
Text-decoration:none;
color:red;
font-size:14px;
Font-weight:bold;
}
}
After compiling through sass, it becomes as follows:
#button {
width:400px;
Text-align:center;
Background:purple;

a{
Text-decoration:none;
color:red;
font-size:14px;
Font-weight:bold;
}
}

The code structure becomes very clear.
It is easy to merge multiple sass files into a single CSS file and compile them in a command line as long as one line of commands is compiled.

Use of 3.sass:
(1) Install SASS, because Sass is written by Ruby, but the two are not much in the syntax of the association, even if you do not know Ruby, you can use the sass directly. So you must make sure that you have Ruby installed before you install sass. Because I'm using the UBUBTU system, Previously, Ruby was also installed, so a direct line of command would be as follows

Gem Install Sass

After a few seconds, there's another way to install sass, which you can install with git:

git clone git://github.com/nex3/sass.git
CD SASS
Rake Install

You can test whether the installation was successful by using SASS-V

Sass's basic syntax can be described in http://www.th7.cn/web/html-css/201407/47710.shtml

Compilation of 4.sass
Generally established SASS files we use. scss as the suffix of the file, and then compile it in the following way:

Compiling a single file

Sass Test.scss Test.css
You can also set the style of the output CSS file

Sass--style Compressed Test.scss test.css
The style of the output style can have four choices, the default is nested

Nested: Nested indentation of CSS code
Expanded: expanded multiline CSS code
Compact: A concise format of CSS Code
Compressed: Compressed CSS Code

Watch Single File

Sass--watch Test.scss:test.css
Watch Folder

Sass--watch Src:dest

The study of SASS