Unlock the Power of Sass
We're dedicated to maintaining Foundation using Sass (the Scss syntax to be exact) and we want to make it the best it can be. Sass gives us the ability to let you choose what parts to import or how it looks.
You can customize which parts of Foundation are included in your compiled CSS or simply include it all. Sass @imports let you control which parts of Foundation you want.
Basic @import The Kitchen Sink
By default, we include
app.scss, which has these settings uncommented to include all of Foundation. This settings file is the first thing we import, you can use this file or create your own using our settings list.
// You custom settings file to override Foundation defaults @import "settings"; // Comment out this import if you are customizing you imports below @import "foundation";
Customize your @imports
You can pick and choose which parts of Foundation you want. The following @imports must be included if you are planning to pick and choose, make sure the
@import "foundation"; line above is commented out or removed.
// Import specific parts of Foundation by commenting the import "foundation" // and uncommenting what you want below. You must uncomment the following if customizing // @import "compass/css3"; // @import "foundation/settings"; // @import "foundation/functions/all";
The next bit of code controls which common elements get included. Certain combinations might throw a mixin error, but just uncomment that mixin to make it work.
// Control which mixins you have access too // @import "foundation/mixins/clearfix"; // @import "foundation/mixins/css-triangle"; // @import "foundation/mixins/font-size"; // Must include next two for semantic grid to work // @import "foundation/mixins/respond-to"; // @import "foundation/mixins/semantic-grid"; // @import "modular-scale"; // @import "foundation/common/globals"; // Must include the grid for any responsiveness // @import "foundation/components/grid"; // Control which common styles get compiled // @import "foundation/common/typography"; // @import "foundation/common/forms";
Finally, you can control which components are compiled at the top of your app.css file by uncommenting what you desire.
// Control which components you get if customizing // @import "foundation/components/modules/buttons"; // @import "foundation/components/modules/tabs"; // @import "foundation/components/modules/ui"; // @import "foundation/components/modules/topbar"; // @import "foundation/components/modules/navbar"; // @import "foundation/components/modules/orbit"; // @import "foundation/components/modules/reveal";