Sass: first recognized the use of Sass and Koala tools, sasskoala

Sass: first recognized the use of Sass and Koala tools, sasskoala

1. Download and install Koala (find the appropriate System Version)

 

 

Second, first create a CSS folder, and create a new file (.txt) in it, and name it demo. scss

 

 

3. Open Koala and drag in the css folder. You can modify the output mode.

 

[Extension] SASS provides four compilation style options:

• Nested: the css code with nested indentation, which is the default value.
• Expanded: expanded css code without indentation.
• Compact: css code in simple format.
• Compressed: the compressed css code.

 

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

1.css style Writing

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

After saving, two files are automatically generated (Note: Do not disable the Koala software)

2. In demo. scss, write the above css code in sass Style

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

Modify and save, then we can see that the generated demo.css code is the same

 

If we want to write such css:

ul li a:hover {  color: blue;}

The corresponding sass can be:

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

[Comment] & represents the substitution element itself. Here it refers to

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. code written today

= Demo. scss =

= Demo.css =