Simple application of SASS

Sass is a CSS preprocessor with powerful syntax and functions, and the more friendly variables are named for less than less, gaining a lot of programmer's favorite. and Sass now supports the full CSS3, which is why programmers love sass.

Installation of SASS

Sass is installed in three ways, command line tools, standalone ruby modules and as a framework plugin

The first kind of installation and use is like this:

Gem Install Sass

If you are using a Windows operating system, you must also first install Ruby

In order to run sass, you can do this

Sass Input.scss Output.css

And you can also listen to the disk

Sass--watch Input.scss:output.css

Very convenient.

Installation and use do not repeat too much, below to see a small example with sass

#main p {  color: #00ff00;  width:97%; }  #main p. redbox {    background-color: #ff0000;    Color: #000000; }

The top is sass, and see how it compiles.

#main p {  color: #00ff00;  width:97%;  . Redbox {    background-color: #ff0000;    Color: #000000;  }}

Is it feeling very convenient, soon Czech? Instead of using CSS as before, Sass has a hierarchical relationship that makes it easier for programmers to think about how to write structures.

#main {  width:97%;  P, div {    font-size:2em;    a {font-weight:bold;}  }  Pre {font-size:3em;}}

For a better example, we look at this sass structure and know that P tags and div notes are descendants of the ID as the main element, and they are at the same level, at a glance, very handy

Post-compilation results:

#main {  width:97%;}  #main p, #main div {    font-size:2em;}    #main p A, #main div a {      font-weight:bold;}  #main Pre {    font-size:3em;}

　　

More examples

Variable declaration

$width: 5em;

　　

#main {  width: $width;}

　　

#main {  $width: 5em!global;  Width: $width;} #sidebar {  width: $width;}

Post-compilation results:

#main {  width:5em;} #sidebar {  width:5em;}

It's so cool, there's wood.

Sass Grammar and form and less, if mastered less, I believe sass will soon grasp

Simple application of SASS