sass Variables Variables in SCSS


Example

In SCSS variables begin with $ sign, and are set like CSS properties.

$label-color: #eee;

They are only available within nested selectors where they’re defined.

#menu {
    $basic-color: #eee;
    color: $basic-color;
}

If they’re defined outside of any nested selectors, then they can be used everywhere.

$width: 5em;

#menu {
  width: $width;
}

#sidebar {
  width: $width;
}

They can also be defined with the !global flag, in which case they’re also available everywhere.

#menu {
  $width: 5em !global;
  width: $width;
}

#sidebar {
  width: $width;
}

It is important to note that variable names can use hyphens and underscores interchangeably. For example, if you define a variable called $label-width, you can access it as $label_width, and vice versa.