Sass Variable

Last Updated:

Sass Variable

Using Sass variable you assign a value to a name that begins with $, and then you can refer to that name instead of repeating the value over and over again.

Example

SASS TO CSS CONVERTER
$myFont: "Open sans", "Segoe UI", "Segoe WP", Helvetica, Arial, sans-serif; $myColor: red; body { font-family: $myFont; color: $myColor }

Syntax

$myVariable: value

Sass Local and Global Variables

Global variables can be accessed anywhere, whereas Local variables can only be accessed within the block they were declared.

Example

SASS TO CSS CONVERTER
// Global variable $myFont: "Open sans", "Segoe UI", "Segoe WP", Helvetica, Arial, sans-serif; body { $myColor: red; // local variable font-family: $myFont; color: $myColor } p { font-family: $myFont; }

Sass Variable vs CSS Variable

CSS has variables of its own, which are totally different than Sass variables.

Sass VariableCSS Variable
Sass variables are all compiled away by Sass. CSS variables are included in the CSS output.
Sass variables only have one value at a time. CSS variables can have different values for different elements.
Sass variables are imperative, which means if you use a variable and then change its value, the earlier use will stay the same. CSS variables are declarative, which means if you change the value, it’ll affect both earlier uses and later uses.

Share this Page

Meet the Author