O'Reilly logo

Pragmatic Guide to Sass by Michael Lintorn Catlin, Hampton Catlin

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

9Defining 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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required