Menu icon Foundation
Overriding global colours / fonts

I'm working on a Foundation 5 project and I'm wondering what's the best practice when overriding SASS variables set by Foundation in the _global.scss file?

I've been very careful not to touch ANYTHING within the 'foundation' folder incase I ever need to update to a newer version. So what I've been doing so far is create an external .scss file for my project which sets a number of variables again. See code below for an example:

// This code overwrites any variables set in the Foundation settings scss file
$body-font-family: "Avenir Roman", "Helvetica", Helvetica, Arial, sans-serif;

$body-bg: #fff !default;
$body-font-color: #323B46 !default;
$heading-font-color: #0094BA !default;

$primary-color: #C6CD00 !default;
$secondary-color: #252F37 !default;
$alert-color: #c60f13 !default;
$success-color: #5da423 !default;

$global-radius: 3px !default;
            

         

This seems to work whenever I use the variables in that same file, but I've just noticed one situation where this doesn't work.

Any default elements (e.g. buttons) that do not have any variables assigned to them in my external .scss, seem to pick up the variables set in the _global.scss file instead.

So clearly I'm only overriding those variables for any styles I use in that particular file, but not on a global scale.

After quite a lengthy explanation, my question is simple: what's the best way to completely override global variables?

Thanks guys loving the framework!

overridestylingSassscss

I'm working on a Foundation 5 project and I'm wondering what's the best practice when overriding SASS variables set by Foundation in the _global.scss file?

I've been very careful not to touch ANYTHING within the 'foundation' folder incase I ever need to update to a newer version. So what I've been doing so far is create an external .scss file for my project which sets a number of variables again. See code below for an example:

// This code overwrites any variables set in the Foundation settings scss file
$body-font-family: "Avenir Roman", "Helvetica", Helvetica, Arial, sans-serif;

$body-bg: #fff !default;
$body-font-color: #323B46 !default;
$heading-font-color: #0094BA !default;

$primary-color: #C6CD00 !default;
$secondary-color: #252F37 !default;
$alert-color: #c60f13 !default;
$success-color: #5da423 !default;

$global-radius: 3px !default;
            

         

This seems to work whenever I use the variables in that same file, but I've just noticed one situation where this doesn't work.

Any default elements (e.g. buttons) that do not have any variables assigned to them in my external .scss, seem to pick up the variables set in the _global.scss file instead.

So clearly I'm only overriding those variables for any styles I use in that particular file, but not on a global scale.

After quite a lengthy explanation, my question is simple: what's the best way to completely override global variables?

Thanks guys loving the framework!

Jeremy Englert over 5 years ago

You should also have a _settings.scss file which includes all of the variables in Foundation. Simply uncomment the line and replace the value with your value of choice.

Hope this helps!

Ashley Mosuro over 5 years ago

Sorry, to clarify, where exactly should this _settings.scss file be? I can't seem to find one that already exists, so do I just need to create that file and reference it anywhere on my site?

If you could elaborate that would be great, thanks!

Note that I'm using Foundation 5.

Rafi Benkual over 5 years ago

Hi,

Click this links to see where:
http://prntscr.com/2avr0k

Also make sure you have it linked in app.scss, which compiles to app.css like so:
http://prntscr.com/2avrlr

It is not recommended to make changes in global, settings is for that.

Ashley Mosuro over 5 years ago

Ah this is interesting. How did you install Foundation 5? Because I downloaded it from the Github repository (https://github.com/zurb/foundation) and it doesn't seem to have the same folder set up that you have.

See this link: http://prntscr.com/2bjte8

So if you've downloaded Foundation 5 via their git repository, it doesn't seem to have those custom files you have.

Jeremy Englert over 5 years ago

You seem to be missing files, even the Github link you posted has the settings file.

https://github.com/zurb/foundation/tree/master/scss/foundation

Ashley Mosuro over 5 years ago

Have no idea how that was missed! It only seems to be the functions and settings files, which look like they're overriding so I guess they weren't absolutely vital.

Thanks

Daniele Pavinato over 5 years ago

Hi,

in my _settings.scss I found $body-font-family variable. I changed the font with what I like, but it won't changes the headers font (h1, h2, h3, ect.), only the other text...

How can i change it?

Brandon Arnold over 5 years ago

Daniele,
You'll need to change the $header-font-family variable to change the font's for the headers.