Write in front:

Now has been using SASS to write CSS, at the beginning of the entry, see a lot of tutorials, then see the clouds in the fog, now seems to be quite detailed, is a little, not small white. My article type has been relatively small white, want to better for not using SASS to provide a little learning information, I believe that this article to want to learn SASS, or there is a great reference value. There are some details in it that might be useful for big hands who have learned to use Sass.

What are the variables?

JavaScript variables:

You can search for js variables

Above a lot of bala bala, can understand, so the variable as a storage box, the article such as keys, cell phones, drinks can be stored in the box, can also be in need of change we want to store the new items, where the old can’t save, can only save one.

advice

There is a great website for compiling SASS files into CSS files online, so you can follow along and do a demo to see what CSS output looks like.

Sass variable format:

$var:value; Chestnut: $color: red;

1. It must start with a $

This is the symbol of the sass variable

2.$is followed by the variable name

The variable name must start with a letter (A-z A-z) and begin with an underscore (_).

3. Value of a variable

Parsing: The value of a variable is separated from its name by a colon (:) (just like CSS property Settings).

Use of the sass variable:

$color:red;/*1. This is the declaration variable */
p{color:$color; }/* the color of the P tag is changed to red———— which is the use of the variable */Copy the code

1. Declare variables before using them

What do you want to put in the box of variables

Step 2 use variables.

Now there are things in the variable, to take out the things in the variable, we must first find the box, find the box to use the things in the variable. The variable name of the variable is where the box is, and to put it where you want to use it is to take out the contents of the box and use it.

Multivalued variable:

$var:value,value,value;

Example:

$back:#fff,green,red; {color: NTH ($back,1); } span{color: NTH ($back,3); Red * / / * 3. The outputCopy the code

Resolution:

$var,index ($var,index); $var,index ($var,index); This can be used to declare multiple colors when writing a page and then use them directly in styles.

About the scope of variables:

Sass inside the code snippet

Resolution:

The above is a demo I do in the SASS file, which is divided into three parts, the following are for you to parse.

1. In the first part, variables must be declared in advance to be used. I didn’t declare the $text1 variable above, but used it directly, causing an error in the file.

Sass files are compiled from the top down, so the variable must be declared on the top of the file. If the variable is not declared on the top, the file will be compiled incorrectly, causing the CSS file to be unusable.

2. The second part, the global properties of Sass, is explained clearly in demo.

Since the sASS file is parsed from top to bottom, the same sass variable will be overwritten when declared outside.

3. The third part, SASS also has local variables. Locally wrapped variables will not affect the external variables, only in their own fields, the external reference to the variable will not work. If I don’t define an external variable here, the locally wrapped part $text:blue; It’s still going to work.

The default value of the variable is default:

As mentioned earlier, sass files are rendered from the top down, and variables declared later will overwrite previous variables. Default is used to make subsequent variables declared at the first variable.

Variable format:

$var:value! default; Chestnut: $color: red! default;

Code examples.

Default code example 1

Resolution:

Sass compiler fails to specify a local scope for a variable (default). Sass compiler fails to specify a local scope for a variable (default).

2 and 3. In the code comments, have been very detailed, do not repeat.

4. It is also valid to declare two consecutive defaults. The first default is overwritten by the second default. The second default is overwritten by variables that are not declared default, so the final output is the variable red that is not declared default.

Default code example 2

1. Not parsed here. See comments for details.

Variables are wrapped in #{}

This is a format used in properties or selectors. Just look at the chestnuts.

$ipt:input; $btm:bottom; Input {}*/ padding-#{$BTM}:5rem; /* Padding-bottom: 5rem; * /}Copy the code

Aside:

I have been writing intermittently for three days, and I have been writing every day. This article is for friends who are not familiar with the concept of SASS variable, and it is written in detail. In a short article, it cannot be guaranteed that people who read this article are familiar with SASS, but I hope that through this article, let you know some usage and concept of SASS variable. The purpose of this article would be achieved if I could stop being so confused.

Finally: because I often do not understand others to write share, so personal writing is relatively small white, write bad place, welcome to give advice. Then the friends who want to finish reading can click like, and they can also pay attention to me. At this stage, there are no less than 15 articles per month (I will also share the dry goods when I see them). Code word is not easy, thank you for your support! Ps: Currently unemployed, coordinate Beijing, looking for a job recommendation. Then hope I write which aspects of the article can be under the comments, or private letter to me, although write bad, but I when this is a way to record their growth. (If I know how to do it, but if I don’t, I’ll write it down for later.) Nuggets personal homepage, Jane book homepage link, CSDN blog homepage link, Github.

References:

Sass uncovered the variables

The above. 2017.4.22