SASS Introduction: Chapter II

1.Sass syntax format

Suppose you have a CSS code like this:

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

Sass the original syntax format

$font-stack:helvetica, Sans-serif$primary-color: #333body    font:100% $font-stack    color: $primary-color

This syntax format does not have the usual curly braces and semicolons in CSS and is prone to errors.

and the syntax format of SCSS

$font-stack:helvetica, Sans-serif; $primary-color: #333; body {    : 100% $font-stack; : $primary-color;}     

Scss is closer to CSS than sass.

2.Sass compilation

Using Sass for development, or referencing ". css" files in a project, Sass is just a preprocessing tool that works only when needed.

There are several ways to compile sass:

? Command compilation

? GUI Tools Compilation

? Automated compilation

3. Command compilation

Use the command terminal in your computer to compile sass by entering SASS instructions. This type of compilation is the most straightforward and the simplest one.

? single-File compilation:

Sass < Sass file path to compile >/style.scss:< to output CSS file path >/style.css

? Multi-File compilation:

Sass sass/:css/

The above command means that all the ". Scss" files in the "Sass" folder in the project are compiled into a ". css" file, and the CSS files are placed in the project's "CSS" folder.

? disadvantages

During the actual compilation process, the above commands can only be compiled once. Each time you save the. scss file, you re-execute the command again. The solution is to turn on the "watch" feature when compiling sass, so that any changes you make to your code can automatically hear the code change and compile it.

Sass--watch < Sass file path to compile >/style.scss: < CSS file path to output >/style.css

For example, suppose you want to compile "bootstrap.scss" in the project "Bootstrap.css" file, and put the compiled file in the "CSS" folder, you can execute it in the command terminal:

Sass--/BOOTSTRAP.SCSS:CSS/BOOTSTRAP.CSS

Once the Bootstrap.scss file has been modified, the command terminal will be able to listen as soon as the modified file has been re-saved.

4.GUI Interface Tool Compilation

For GUI Interface compiler tool, the popular main is:

? Koala (http://koala-app.com/)
? Compass.app (http://compass.kkbox.com/)
? Scout (http://mhs.github.io/scout-app/)
? Codekit (https://incident57.com/codekit/index.html)
? Prepros (https://prepros.io/)
In contrast, the following two are recommended:

? Koala (http://www.w3cplus.com/preprocessor/sass-gui-tool-koala.html)
? Codekit (http://www.w3cplus.com/preprocessor/sass-gui-tool-codekit.html)

5. Automated compilation

? Grunt Configuring the sample code for SASS compilation

{    grunt.initconfig ({        pkg: grunt.file.readJSON (' Package.json '),        sass: {            dist: {                Files: {                    ' style/style.css ': ' Sass/style.scss '                }}        },        {            CSS : {                files: ' * */*. Scss ',                tasks: [' Sass ']}}}    );    Grunt.loadnpmtasks (' Grunt-contrib-sass ');    Grunt.loadnpmtasks (' Grunt-contrib-watch ');    Grunt.registertask (' Default ', [' Watch ']);}　　

? Gulp Configuring the Sample code for Sass compilation

{    gulp.src ('./scss/*. Scss ')        . Pipe (Sass ())        . Pipe (Gulp.dest ('./css '));}); Gulp.task (' Watch ', function () {    gulp.watch (' scss/*.scss ', [' sass ']);}); Gulp.task (' Default ', [' sass ', ' watch ']);

6. Common compilation errors

Character compilation error: During Sass compilation, the file encoding needs to be set to "Utf-8".

? path Noon Character error: It is recommended that you do not use Chinese characters for file naming or file directory naming in your project.

7. Different styles of style output

The styles compiled in Sass mainly include the following:

? nested output mode nested

? Expand Output Mode Expanded

? Compact output Mode Compact

? compression output Mode compressed

For example:

{  ul {    margin: 0;     Padding: 0;     list-style: none;  } {display: inline-block;}     {display: block;            Padding: 6px 12px;     text-decoration: none;  } }

(1) Nested output mode nested

At compile time, take the parameter " --style nested ":

Sass--watch test.scss:test.css--style nested

Compiled CSS style style:

{  margin: 0;   padding: 0;   list-style: none;}  {  display: inline-block;}  {  display: block;   Padding: 6px 12px;   text-decoration: none;}

(2) Expand the output mode expanded:

At compile time, take the parameter " --style expanded":

Sass--watch Test.scss:test.css--style Expanded

Compiled CSS style style:

{  margin: 0;   padding: 0;   list-style: none;}  {  display: inline-block;}  {  display: block;   Padding: 6px 12px;   text-decoration: none;}

The CSS style of this output is similar to nested, except that the curly brace is a different line.

(3) Compact output mode compact:

Take the parameter " --style compact " at compile time:

Sass--watch Test.scss:test.css--style Compact

Post-compilation CSS style:

{ margin: 0; padding: 0; List-style: none; }{ display: inline-block;}  { display: block; padding: 6px 12px; text-decoration : None; }

For friends who prefer a single-line CSS style format.

(4) Compression output mode compressed

At compile time, take the parameter " --style compressed ":

Sass--watch TEST.SCSS:TEST.CSS--style Compressed

Compiled CSS style style:

Nav ul {margin:0; padding:0; List-style:none}nav li{display:inline-block}nav a{ Display:block; padding:6px 12px; text-decoration:None}

The compression output removes standard sass and CSS comments and spaces.

9.Sass Commissioning

As long as the browser supports the "sourcemap" feature, you can debug the Sass file directly in the browser. Earlier version, you need to add the " --sourcemap " parameter at compile time:

Sass--watch--scss--sourcemapstyle.scss:style.css

There is no need to add this parameter on top of the Sass3.3 version:

Sass--watch Style.scss:style.css

At the command terminal, you will see a message:

>>> Change detected to:style.scsswrite style.csswrite Style.css.map

You can debug the Sass file directly in the browser.

SASS Introduction: Chapter II