Menu icon Foundation
Changing _settings.scss?

I keep reading that all my changes should go into app.scss. OK, but then how can I change something like the heading color (h1, h2, etc)? They are defined in _settings.scss. Is there any way to "override/extend" settings without changing _settings.scss?

app.scss _settings.scss css override extend

I keep reading that all my changes should go into app.scss. OK, but then how can I change something like the heading color (h1, h2, etc)? They are defined in _settings.scss. Is there any way to "override/extend" settings without changing _settings.scss?

Argyle Cat over 3 years ago

I think it's OK to change _settings.ccss. For instance, if you wanted to change ALL fonts to Courier you could use:

$body-font-family: Courier, "Courier New", monospace; 

but if you just wanted to change your headings to Courier, you could use this:

$header-font-family: Courier, "Courier New", monospace; 

In your case, you'd want to tweak the $header-color variable to change the color of the headers. Optionally, if you didn't want to change _settings.scss but you still want to change colors, you could do something like this simple css override in app.scss:

h1, h2, h3, h4, h5, h6 {color: red;}

Colin Marshall over 3 years ago

If you're using Foundation with bower or npm, make sure you copy the _settings.scss file in bower_components/foundation-sites or node_modules/foundation-sites, place it in your project folder, and import it in your app.scss file. This way the customizations you make in the file won't be lost when you update Foundation through bower/npm.

jstubbs over 3 years ago

Can also copy the _settings.scss file, then rename it to say _custom.scss. Then go to app.scss and change "@import 'settings';" to "@import 'custom';" so that any customisations are carried forward when Foundation is updated.

powellian over 2 years ago

Doing this economically has been foxing me for a while. What I wanted to do was just have one file - say '_settings-overrides' which just has copies of the relevant variable etc I wanted to affect. I didn't want to copy the whole '_settings' files as that just felt inefficient and could be problematic when it came time to upgrade. 

I spent too long messing around with the @import positioning of the '_settings-overrides.scss' file and wondering why it wasn't making any effect.

So after loads of fiddling about and scratching my head I stumbled across this:

  • create: '_settings-overrides.scss'
  • in 'app.scss' import 'settings-overrides' directly after '@import settings' - i.e. line 3 or 4

So then in '_settings-overrides.scss' I only need to copy and override the relevant variable from the original '_settings' file - it can be a very lean file. That way '_settings' doesn't need to be touched and it can easily be replaced when it comes to upgrade time.