Sass: getting to know the use of Sass and Koala tools

Download Koala (find the appropriate system version) and install it

Create a new css folder, and then create a new text document (.txt) in it, and name it demo.scss

Open Koala and drag the css folder in to modify the output mode.

[extension] SASS provides four compilation-style options:

Nested: nested indented css code, which is the default.

Expanded: there is no indented, extended css code.

Compact: css code in a concise format.

Compressed: compressed css code.

It's time to write code again. Open demo.scss with any text writing tool.

1.css style writing

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

After saving, you will see that 2 files are automatically generated (premise: do not close the Koala software)

two。 Write the above css code in sass style in demo.scss

Ul {li {a {color: black;}

Modify and save, at this point, we see that 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 the 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, the compiled css:

A {color: # abc;}

5. Screenshots of the code written today

= = demo.scss = =

= = demo.css = =