Configuring zurb foundation-sass with compass - how do you get it working and use it in a project?

Question

I'm new to sass and zurb foundation (I've used bootstrap/less via codekit in the past) and have been trying to use the sass version foundation-sass but can't successfully get it configured - either via the command line using zurb's gem or by using codekit.

If I configure the gem:

1. Foundation works as long as I load all the foundation components via @import "ZURB-foundation";

2. But if I try to load components separately by uncommenting @import "zurb/buttons"; I see errors: "Undefined variable: "$default-color" - but where do the variables and mixin files live?

3. Also, where do the foundation scss files live so you can customize the design without having to override everything using apps.scss?

If I take another route and try to use the mac application codekit:

1. I get errors that the /zurb/ directory doesn't exist (which it doesn't) - this seems to be related to point 3 above - when you create a new compass-foundation project, none of the foundation files seem to live in your project folder.

If I then download foundation-sass via github:

1. All the files are in sass format rather than scss

2. And although you can modify compass mixins as you call them, how do you modify foundation's stylesheet files without modifying their originals - or are you supposed to edit their files?

I haven't found any information I understand on how everything is supposed to fit together so was hoping someone here might know.

I'm not using this with a ruby project btw - just trying to set things up purely for front-end work.

Any help would be much appreciated.

Cheers

Ben

Answer 1

I hope you've solved the problem by now. If not, here's a solution for the gem.

As of Foundation 2.2.1, the suggested import order found in foundation.sass, through commented lines, is somewhat wrong. Many colors or mixins are defined in shared/* and if you load buttons/* before loading these, you'll end up insulted by compass.

On the other hand, the partial _ZURB-foundation.sass (imported by @import "ZURB-foundation") loads partials in the right order, explaining why you only got errors while loading components separately.

Try this order (SASS syntax, add quotes and semicolons for SCSS):

@import zurb/shared
@import zurb/globals
@import zurb/typography
@import zurb/grid
@import zurb/buttons
@import zurb/ui
@import zurb/forms
@import zurb/orbit
@import zurb/reveal
@import zurb/mobile

You can use gem which ZURB-foundation to find out which directory stores the gem. Customizing Foundation files directly is nevertheless a very bad idea, as your changes might be erased by further updates.

Answer 2

For Zurb Foundation 4 it is as simple as importing the "/foundation/foundation-global" file first

@import 'foundation/foundation-global';
@import 'foundation/components/type';
// etc

See here in the source comments

It's important to note that 'foundation/global' is not the same thing as 'foundation-global'. The later just satisfies basic dependencies, while the former provides some minimal basic styling.