Sass: The use of primary knowledge Sass and Koala tools

First, download Koala(Find the appropriate system version) and install

Second, create a new CSS folder and create a new text document (. txt) init and name it demo.scss

Third, open the koala, the CSS folder dragged in, you can modify the output mode

The extensions Sass provides four compile-style options :

• Nested: Nested indentation of the CSS code, which is the default value.
• Expanded: No indented, extended CSS code.
• Compact: A concise form of CSS code.
• Compressed: Compressed CSS code.

Four, it is time to write code, just use a text writing tool to open demo.scss

1.CSS style writing

1 ul Li a {2    color: red;  3 }

You will see the automatic generation of 2 files after saving (if:Koala software does not close)

2. In the Demo.scss Sass Style write the above CSS code

ul{    li{        a{            color:black;        }    }

Modify and save, at this point, we see the generated DEMO.CSS code is the same

If we want to write a CSS like this:

UL li a:hover {  color:blue;}

The corresponding sass can be:

ul{    li{        a{            color:black;             &: hover{                color:blue;     }}}

"Commentary"& represents an alternative element itself, in this case a

3. Use variables: All variables start with $

Write the following code in DEMO.SCSS:

$color: #abc; a{    color: $color;}

After saving, compile into the CSS:

{  color: #abc;}

V. The code written today

= = Demo.scss = =

= = Demo.css = =

Sass: The use of primary knowledge Sass and Koala tools