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:
$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:
$myFont: Helvetica, sans-serif;
$myColor: red;
$myFontSize: 18px;
$myWidth: 680px;
body {
font-family: $myFont;
font-size: $myFontSize;
color: $myColor;
}
#container {
width: $myWidth;
}