What are variables in SASS?

Sass Variables allow you to define a value once and use it in multiple places. Variables begin with dollar signs and are set like CSS properties. You can change the value of the variable in one place, and all instances where it is used will be updated.

When defining a variable we store in it a value, which often reoccur in the CSS like a palette color, a font stack or the whole specs for a cool box-shadow. Also, mostly the variables are defined at a fixed location, like top of the SASS file or in a dedicated separate file. This makes it easy to locate and change the values, instead of searching through the entire stylesheet.

Below you can see a simple example, where variables are used to define font, color and shadow.

SCSS file:

$title-font: normal 24px/1.5 'Open Sans', sans-serif;
$title-color: #F44336;
$box-shadow-bottom-only: 0 2px 1px 0 rgba(0, 0, 0, 0.2);

h1.title {
  font: $title-font;
  color: $title-color;
}

div.container {
  color: $title-color;
  background: #fff;
  width: 100%;
  box-shadow: $box-shadow-bottom-only;
}

Output CSS file after compilation

h1.title {
  font: normal 24px/1.5 "Open Sans", sans-serif;
  color: #F44336; 
}

div.container {
  color: #F44336;
  background: #fff;
  width: 100%;
  box-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.2);
}

SASS variables make it extremely easy to organize your stylesheet and make updates.

GrooveUI allows you to create multiple themes, by setting separate values of SASS variables for each theme. New themes can be created using GrooveUI website and values updated in real time.