Sass learning path (5) -- variables, sass learning path variables

Sass learning path (5) -- variables, sass learning path variables

1. Define variables:
The keyword for defining variables in Sass is '$' (after all, programmers are short of money), and assign values using colons (:). For example:

1. $ Width: 200px; // defines a variable named width with a value of 200px.

 

2. Common variables and default variables:

Common variables are the variables declared in the above way in braces, which can be used globally.

The default variable must be added after the declared variable! Default:

1. $ LineHeight: 1.5! Default;

The default variable can be understood as an initial value for the variable. If the variable does not have a value when it is used, the default value is used. Defining common variables before or after the default variables overwrites the value of the default variables.

1. $ LineHeight: 2;
2. $ LineHeight: 1.5! Default;
3. . Line {
4. Line-height: $ lineHeight;
5. }
6. // The result is:
7. . Line {
8. Line-height: 2;
9. }

You can also think of the default variable as the variable with the lowest priority. The priority order is :! Default <Common variable <! Important

3. Local and global variables

Global variables: variables defined outside selector, function, and hybrid macro.

Local variable: it is actually the content above.

Here is an example:

1. // SCSS
2. $ Color: orange! Default; // defines global variables
3. . Block {
4. Color: $ color; // call global variables
5. }
6. Em {
7. $ Color: red; // defines local variables
8. A {
9. Color: $ color; // call a local variable
10. }
11. }
12. Span {
13. Color: $ color; // call global variables
14. }

The compiled result is as follows:

1. // CSS
2. . Block {
3. Color: orange;
4. }
5. Em {
6. Color: red;
7. }
8. Span {
9. Color: orange;
10. }

It can be seen that the priority of the local variables defined inside the selector is higher.