How to update SASS styles of Foundation 5?

Question

I'm new to the Foundation framework, so that is an easy newbie question.

In my project, I only have a couple of scss files in a sass directory:

_foundation.scss (CSS file of 5000+ lines)
_normalize.scss (normalizing CSS file)
_setting.scss (A large amount of commented SCSS variables)
app.scss (Gathering the other scss files)

I'm little disappointed not to have more scss files standing for the different modules.

To begin, I would like to update one style value, for instance the topbar background-color:

$topbar-bg-color: rgba(0,0,0,0);

Where should I insert or update this value ? I tried to update the setting.scss, without success.

Answer 1

I figured out that I added manually _foundation.scss from a static css file. Therefore, it could not be updated...

The solution is simply to delete this static _foundation.scss file. There shouldn't be any. I don't know where sass imports the foundation styles from. But the point is that the foundation styles are actually imported and updated when there is no _foundation.scss file in the sass folder.

Answer 2

You should use _settings.scss file. Create app.scss file in scss directory and put this in it:

@import "normalize"; // just normal normalization
@import "foundation/settings"; // the CHANGED settings (will affect Foundation)
@import "foundation"; // and Foundation framework itself

// your awesome custom styles go here

And then compile app.scss - that's all.