Pragmatic Guide to Sass

9	Defining Variables

Have you ever been in a situation where you are copying the value of a color over and over again? That very specific blue that your clients want appears in so many places. Then, a couple of weeks later, they want you to change the color. Or—even worse—you have a whole lot of colors to change. Find and replace time! Color handling in CSS is not DRY (there’s that Don’t Repeat Yourself again!) at all.

Sass introduces variables to help us manage problems like this. All variables in Sass are prefixed with a $ sign. Assigning a variable looks a lot like typing in a CSS property. For instance, we can set the $primary_color variable by adding the super-simple line: $primary_color: #369;. That’s it!

To use the variable, we can just ...