Sass usage, sass Usage Guide

Sass usage, sass Usage Guide

At the beginning, we may be used to html + css when learning the front-end. But we found that css has a lot of repeated code or you have to change the image or text in it, and it is very troublesome to look for it, so we will use sass to simplify it.

First, we need to install a koala software. It is used to compile the asaa code to generate css Code. At first, I was not used to it, but it is indeed much more convenient, it also improves the efficiency of web pages.

Sass has two types of suffix files: sass, which does not use braces or semicolons, this is similar to the css file format we usually write, using braces and semicolons. All sass files are files suffixed with scss. We recommend that you use a file with the suffix scss to avoid an error in the strict format of the sass suffix.

Column: body

Background: # eee

Font-size: 12px

P

Background: #0982c1

// Syntax with the file suffix scss

Body

{Background: # eee; font-size: 12px;

}

P

{Background: #0982c1;

}

! The default value of defanlt. You can change the default value on the outside.
Variable # {} must be added wherever possible.

Multi-value variable. One variable can have multiple values.
Column: $ num: 1px 2px 3px 4px
Margin: nth ($ num, 1 );
Nth scope (obtain an element based on your tag value)

Nested)
Sass includes two types of nesting: Selector nesting and attribute nesting. Generally, the nested selector is used.

Mixin)
In sass, @ mixin can be used to declare a mixture. parameters can be passed. The parameter names start with the $ symbol. Multiple parameters are separated by commas. You can also set the default value for parameters. The declared @ mixin is called through @ include.

Inheritance
In sass, selector inheritance allows the selector to inherit all styles of another selector and Joint Declaration. To use selector inheritance, use the keyword @ extend, followed by the selector to be inherited.

For Loop
The for loop has two forms: @ for $ var from <start> through <end> and @ for $ var from <start> to <end>. $ I indicates the variable, start indicates the start value, and end indicates the end value. The difference between the two is that the key word "through" indicates that the number includes the end value, while "to" indicates that the number does not include the end value.

 

Of course, these are just a few of the methods I have mentioned. There are many other methods that we use most frequently. You can test it.