Sass 变量

## Sass Variables
Variables are a way to store information that you can re-use later.

With Sass, you can store information in variables, like:

- strings
- numbers
- colors
- booleans
- lists
- nulls

Sass uses the $ symbol, followed by a name, to declare variables:

Sass Variable Syntax:

```sass
$variablename: value;
```

The following example declares 4 variables named myFont, myColor, myFontSize, and myWidth. After the variables are declared, you can use the variables wherever you want:

SCSS Syntax:

```sass
$myFont: Helvetica, sans-serif;
$myColor: red;
$myFontSize: 18px;
$myWidth: 680px;

body {
  font-family: $myFont;
  font-size: $myFontSize;
  color: $myColor;
}

#container {
  width: $myWidth;
}
```

So, when the Sass file is transpiled, it takes the variables (myFont, myColor, etc.) and outputs normal CSS with the variable values placed in the CSS, like this:

```sass
body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}

#container {
  width: 680px;
}
```

## Sass Variable Scope
Sass variables are only available at the level of nesting where they are defined.

Look at the following example:

CSS Output:

```sass
$myColor: red;

h1 {
  $myColor: green;
  color: $myColor;
}

p {
  color: $myColor;
}
```

Will the color of the text inside a `<p>` tag be red or green? It will be red!

The other definition, $myColor: green; is inside the `<h1>` rule, and will only be available there!

So, the CSS output will be:

```sass
h1 {
  color: green;
}

p {
  color: red;
}
```

Ok, that is the default behavior for variable scope.

## Using Sass !global
The default behavior for variable scope can be overridden by using the `!global` switch.

`!global` indicates that a variable is global, which means that it is accessible on all levels.

Look at the following example (same as above; but with `!global` added):

```sass
$myColor: red;

h1 {
  $myColor: green !global;
  color: $myColor;
}

p {
  color: $myColor;
}
```

Now the color of the text inside a `<p>` tag will be green!

So, the CSS output will be:

```sass
h1 {
  color: green;
}

p {
  color: green;
}
```

<div class="callout callout-warning mb-3">Tip: Global variables should be defined outside any rules. It could be wise to define all global variables in its own file, named "_globals.scss", and include the file with the [@include](http://www.bixiaguangnian.com/manual/sass_tutorial/3952.html "@include") keyword.</div>