Sass variables are just like you would expect them to be: they store information that you'd like to reuse throughout your style sheet. This saves time and annoying errors. And just like global variables in other languages, you only need to define them in one place—so if they ever need to change, you just have to change the variable in one place, rather than change all of the occurrences in your CSS styles.

You can store almost anything. Here is an example where we store the font information and a font color:

/* Here is the Sass code defining the variables */

$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
 font: 100% $font-stack;
 color: $primary-color;
}

The preceding Sass code will be compiled and the equivalent CSS code will be generated:

/* Here is the CSS that the above Sass is compiled to */

body {
  font: Helvetica, sans-serif;
  color: #ccc;
}