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

13Building a Font Family Library

In regular CSS, we specify fonts like this:

 
font-family​: ​"helvetica neue"​, ​arial​, ​helvetica​, ​freesans​,
 
"liberation sans"​, ​"numbus sans l"​, ​sans-serif​;

We have to list all our preferred fonts in the order we want them. Then, inevitably, we have to include the most basic serif or sans serif at the end—just in case none of our fonts are available. But if we want to switch between fonts on a page, then we have to copy and paste this list over and over in different places or use ugly, nonsemantic font classes. So much repeated code. We’ve got a simpler way.

We can use variables in Sass! Instead of typing out the list of fonts over and over, define a variable at the top of the page. Then, when you ...

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