O'Reilly logo

Getting Started with Zurb Foundation 4 by Andrew D. Patterson

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

Customizing with variables

If you installed a custom download of Foundation from the Zurb website, not only could you selectively include components, but you could also customize several variables before downloading. With SASS you can customize all those variables and a whole lot more, any time you want. It is worth learning how to install and compile Foundation with SASS for this capability alone.

Open the custom variables file that you created earlier. It's in the scss/foundation folder. We suggested calling it _custom-variables.scss. Foundation has helpfully put a copy of the variables you can modify in this file. If a variable is commented out, its default value will be used.

Variables are defined in the component SCSS files that you'll find ...

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