SCSS variables

SCSS variables are a way to store information that you want to reuse throughout your style sheet. You can store things like colors, font stacks, or any CSS value you think you want to reuse. SCSS uses the $ symbol to make something a variable.

SCSS supports the follow data types:

  • Numbers (including units)
  • Strings (with quotes or without)
  • Colors (name, or names)
  • Booleans

Variables can also be arguments to or results from one of several available functions or mixins. During translation, the values of the variables are inserted into the output CSS document.

For example:
$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100%$font-stack;
  color: $primary-color;
}

For more information on Sass, see the Sass/SCSS reference.