Menu icon Foundation
Foundation 6 _settings.scss


I am just wondering, what is the purpose of the _settings.scss file in Foundation 6?

It does not affect the styles at all. And as far as I can tell, it does not get included in any other file.

I installed Foundation through NPM.

foundation 6_settings.scss


I am just wondering, what is the purpose of the _settings.scss file in Foundation 6?

It does not affect the styles at all. And as far as I can tell, it does not get included in any other file.

I installed Foundation through NPM.

Jordan Bommelje about 4 years ago

Hey Ron,

When you see a filename starting with an underscore, it typically denotes that it's an imported file. If you take a look at app.scss, you'll see "@import 'settings';" which is importing this. You'll need to compile your app.scss for any changes to take effect. Are you familiar with using Sass? I don't mean to offend you if you do, it's hard to know everyone's background!


Ron Wade about 4 years ago

Hi Jordan,

Yes, I am familiar with Sass.

You don't have to apologize - it's better to assume that someone is a novice when you are helping them.

There is no app.scss present in my installation. Maybe because I installed via NPM and you are using one of the starter templates?

I expected _settings.scss to be imported into foundation.scss but it isn't.

I'm not really having a problem because of my workflow. I put whatever _settings.scss variables I want to override my own _global.scss file outside of the Foundation directory. Then I import my _global.scss after Foundation's _global.scss in foundation.scss.

it just looks odd that the _settings.scss file isn't being imported anywhere.

Jordan Bommelje about 4 years ago

I've been using foundation-cli which seems to set things up slightly different. When I look through foundation that npm installs, I don't have a _settings.scss file, but instead there's a foundation.scss which imports _variables.scss which seems to be comparable to app.scss with _globals.scss. Do you have a foundation.scss file? I wonder if something god updated and didn't go as planned.

So I think this is just an anomaly, or if you have an older version for some reason?

Ron Wade about 4 years ago

The scss directory looks like this:


foundation.scss imports _global.scss to get settings. However, _global.scss has some, but not all, of the variables found in _settings.scss.

I just checked Foundation's github repo and it has this same structure.

Rafi Benkual about 4 years ago

The _settings.scss is a file that has all the default variables in Foundation. You can make changes to the defaults all in one file.

Chimezie Enyinnaya about 4 years ago

Following this structure, the changes made in settings.scss is not effective in the final app.css compiled.

Daniel Woodard almost 4 years ago

I have used the _settings file in the past. In Foundation 6 I don't see a _settings file using an "npm install foundation-sites --save"

The docs still reference _settings?

Rafi Benkual almost 4 years ago

For now you can add it manually from here:

The CLI will build this automatically.

We found a better way to import this file and in 6.1 it will be included in the NPM package.

Daniel Woodard almost 4 years ago

I updated to 6.1 but still don't see the _settings.csss file. I'll add it manually for now, thanks!

EDIT: Apologies, it is in foundation-site/scss/settings/_settings.scss

Somehow I was overlooking the folder, looking for the file.

Sumit Khanna almost 4 years ago

I'm really confused...

In my version of Foundation 5, the _settings.scss was all commented out. It seemed like it was there more for documentation. I put the settings I wanted to customize in my main.scss.

In Foundation 6, all the variables in _settings.scss are not commented out and I can't override any of them in main.scss. I don't want to edit _settings.scss directly. I'm using it Jekyll and I use the jekyll-multisite plugin, so site specific variables all go in the main.scss (in Liquid template if blocks).

So on Foundation 5 I have stuff like:

// Site Specific
{% if site.title == 'FightTheFuture' %}

  $primary-color: #F2671F;
  $secondary-color: #9C0F5F;
  /* ... other settings */

{% endif %}
{% if site.title == 'PenguinDreams' %}

  $high-green: scale-color(#00a46c, $lightness: -10%);
  $darker-blue: #053C5E;
  $lighter-blue: scale-color($darker-blue, $lightness: -14%);
  /* ... other settings */

{% endif %}
// Behold, here are all the Foundation components.
@import 'foundation/components/grid';
@import 'foundation/components/accordion';
@import 'foundation/components/alert-boxes';
@import 'foundation/components/block-grid';
@import 'foundation/components/breadcrumbs';
@import 'foundation/components/button-groups';
/* and all that other crap */

main {
  @include grid-row;
  section, div.pagination {
    @include grid-column(12);
  padding-top: 25px;

/* and all the CSS that's shared between sites */

In Foundation 6, there's a @include foundation-everything; that pulls in all that stuff. That's a bit cleaner, but I don't get how to override settings without hacking away at the original _settings.scss (or creating and importing my own?)

Who made this design decision? I don't see how this is cleaner at all.

I don't play on migrating my sites from Foundation 5, but I am writing a tutorial for Jekyll 3 + Foundation 6 and I do want to use it on another site I'm designing. Is there something simple I'm missing?

Rafi Benkual about 3 years ago

In Foundation 6, all the default settings are generated automatically from the core framework files. They are all commented in because they are the defaults and you can simply make a change and save now.

Daniel Molnar almost 2 years ago

I ran the CLI:

foundation build

I saw everything was working in my offline code but when I uploaded to the server it didn't work so it may be a caching issue as well.

I can confirm after clearing my browsing data the app.css file was finally updated and the changes made were displayed online.

This is great, it means the site will launch super fast for return visitors but makes testing a bit more difficult so just look at your offline versions and remember if you are showing a client via online conference they will also need to clear their browsing data if you don't feel like modifying the lease times on your css files.

Scott Benton over 1 year ago

If your settings file doesn't seem to be having an impact, make sure settings file is being imported BEFORE your foundation core files. This is pretty obvious when you think about it, but I had it backwards - and that won't work!

So in app.scss:

@import "_settings.scss";

@import "_custom.scss";

@import "node_modules/foundation-sites/assets/foundation";

If the settings aren't imported before the foundation core, they won't have any impact. Ditto for any customization of the settings. FYI - I'm using foundation-sites 6.4.3.