Menu icon Foundation
confused about _settings

Hi,
I never real understood the way _settings is supposed to work. right now i'm working in foundation 6 and in the _settings.scss i define:

$header-font-family: 'Playfair Display', serif;
            

         

But this doesn't work because the $header-font-family is overridden bij _base.scss where it says

$header-font-family: $body-font-family !default;
            

         

So i could comment out the offending line in _base.scss, but that will be overridden if i decide to update foundation with Bower. I use Gulp to build the project and i have copied the _settings.scss to my custom src/scss. to prevent it from override.
So what is the best approach to handle these situations?

settingsfoundation 6

Hi,
I never real understood the way _settings is supposed to work. right now i'm working in foundation 6 and in the _settings.scss i define:

$header-font-family: 'Playfair Display', serif;
            

         

But this doesn't work because the $header-font-family is overridden bij _base.scss where it says

$header-font-family: $body-font-family !default;
            

         

So i could comment out the offending line in _base.scss, but that will be overridden if i decide to update foundation with Bower. I use Gulp to build the project and i have copied the _settings.scss to my custom src/scss. to prevent it from override.
So what is the best approach to handle these situations?

Geoff Kimball almost 4 years ago

Make sure you're importing the settings file before the framework itself.

@import 'settings';
@import 'foundation';

Lefthandmedia almost 4 years ago

Hi Geoff,
The confusion arises from the fact there are 2 files _settings.scss.
I'm studying the test project Yeti installed for me.
The first is in

/ scss
    + _settings.scss
    + app.scss

This app.scss in it's turn does @import 'foundation' which can be found in

/bower_components
    /foundation-sites
        /scss
            + foundation.scss

This foundation.scss imports every possible partial there is, including

 /bower_components
    /foundation-sites
        /scss
            /typography
                + _typography.scss

which imports _base.scss

Now, there is also a _settings.scss in

 /bower_components
    /foundation-sites
        /scss
            /settings
                + _settings.scss

Right now there are 3 places where $header-font-family is defined (2 flavors of _settings, 1 in my app folder and 1 in bower_components and 1 _base.scss)
Since the path to bower_components/foundation-sites/scss has been added to paths for gulp-sass i assume the gulp-sass can also find the _settings file in bower . Now when i adjust $header-font-family in my scss folder it doesn't always change.
Now may i assume that:
- i don't have to change anything in the bower_components ever?
- when i comment out an import in my app.scss file it wil not be included. Even though it IS an @import in the boer_components...foundation.scss ?
- my own scss/_settings.scss is the right place to adjust foundation $variables ?

thanks for helping my wrapping my brain around this construction :)

Geoff Kimball almost 4 years ago

To answer your questions:

  • Never change anything in bower_components (or node_modules, which is where the template's development dependencies are stored). This is because, when you upgrade Foundation, jQuery, etc., the package manager is going to overwrite all of those files to update them to newer versions.
  • To disable a component's default CSS, comment out the corresponding @include in app.scss. The framework is designed to be imported at all once, but just importing it doesn't print any CSS—you only get the guts of the framework.
  • Your settings file is the right place to change settings. The file you see in scss/settings/_settings.scss is actually not used by the framework. We just keep it there so our other build tools (like the custom download creator) can use it.

The framework does try to assign values to the variables after you've already changed them in _settings.scss. But note that, in the framework code, there's a flag called !default. What that does is say, "only change this value if it hasn't already been set earlier." Since you're setting it earlier in _settings.scss, it won't get overridden.