Variables

One simple yet powerful feature of Sass is variables. Let's set up variables called $blue, and $red which respectively equal the colors I've been using throughout the site for basically anything you saw that was blue or red:

//colors$blue: #0072AE;$red: #EB2428;

Now when I need to put enter the hard-to-remember hex value of #0072AE, I can just type in $blue and Sass magically takes care of it. An equally good use of variables is they with fonts, and that's where I think it really gets powerful. With fonts, you can usually type in a font-family and then create a stack of fonts. But, this can get lengthy and repetitive. So plugging all of this information into a variable, a very simple one such as $maven or $droid, makes it really ...

Get Mastering CSS now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.