0

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.

JasonMArcher
  • 14,195
  • 22
  • 56
  • 52
Yako
  • 3,405
  • 9
  • 41
  • 71
  • Stupid question but, have you compiled the files again after editing the `setting.scss`? – Fabrício Matté Apr 21 '14 at 21:38
  • I think it's automated ; the directory is watched by Compass. And I managed to change the body background by updating app.scss. So I guess that Compass monitors correctly... – Yako Apr 21 '14 at 21:42
  • So go for `app.scss` after all other files are included there and therefor the var gets overwritten the later in the code it's changed. – Volker E. Apr 22 '14 at 02:42
  • Good to know. However, it does not update the app.css. Just discovered the compas_app_log, which says that the app.css stylesheets are identical :( – Yako Apr 22 '14 at 05:20
  • I think I found out what is happening. I can't update foundation.scss because it is a static CSS file. Where could I download a scss version for foundation 5 ? – Yako Apr 22 '14 at 09:19

2 Answers2

4

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.

neciu
  • 4,373
  • 2
  • 24
  • 33
0

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.

Yako
  • 3,405
  • 9
  • 41
  • 71
  • Thanks to @neciu. Look at his answer which is complementary if you need a view of the app.scss file. – Yako Apr 24 '14 at 06:15