Sass: First introduction to the use of Sass and Koala tools_html/css_WEB-ITnose

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

2. Create a new one first A css folder, and create a new text document (.txt) in it, name it demo.scss

3. Open Koala, drag the css folder in, and modify the output method

[Extended] SASS provides four compilation style options:

nested: Nested indented css code, it is the default value.

expanded: Unindented, expanded css code.

compact: css code in a concise format.

compressed: compressed css code.

4. It’s time to write code again. Use any text writing tool to open demo.scss

1.css style writing

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

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

2. Write in sass style in demo.scss Modify and save the above css code

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

. At this time, we see that the generated demo.css code is the same

If we want to write css like this:

ul li a:hover {  color: blue;}

The corresponding sass can be:

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

【 Explanation】& represents the replacement element itself, here it refers to 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. Screenshot of the code written today

= = demo.scss ==

== demo.css ==