$: variables

Variables: $

The most straightforward way to use SassScript is to use variables. Variables begin with dollar signs, and are set like CSS properties:

$width: 5em;

You can then refer to them in properties:

#main {
  width: $width;
}

Variables are only available within the level of nested selectors where they’re defined. If they’re defined outside of any nested selectors, they’re available everywhere. They can also be defined with the !global flag, in which case they’re also available everywhere. For example:

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

#sidebar {
  width: $width;
}

is compiled to:

#main {
  width: 5em;
}

#sidebar {
  width: 5em;
}

For historical reasons, variable names (and all other Sass identifiers) can use hyphens and underscores interchangeably. For example, if you define a variable called $main-width, you can access it as $main_width, and vice versa.