Menu icon Foundation
Load _settings.scss before or after foundation.scss?

If I load my stylesheets in this order, the 'settings' file doesn't have access to any of the variables from foundation (such as $white, $ghost, $oil, etc).

// import foundation overrides
@import "settings";

// foundation.scss
@import "../../bower_components/foundation/scss/foundation";

However, if I load the settings file after Foundation, the settings file does not overwrite any of the defaults in Foundation.

// foundation.scss
@import "../../bower_components/foundation/scss/foundation";

// import foundation overrides
@import "settings";

Any ideas?

Sassscss

If I load my stylesheets in this order, the 'settings' file doesn't have access to any of the variables from foundation (such as $white, $ghost, $oil, etc).

// import foundation overrides
@import "settings";

// foundation.scss
@import "../../bower_components/foundation/scss/foundation";

However, if I load the settings file after Foundation, the settings file does not overwrite any of the defaults in Foundation.

// foundation.scss
@import "../../bower_components/foundation/scss/foundation";

// import foundation overrides
@import "settings";

Any ideas?

Jeremy Englert over 4 years ago

Fixed this by importing the global.scss into the settings.scss.

Rafi Benkual over 4 years ago

Should be

@import "settings";
@import "foundation";

All the components import global so if you import Foundation that's all you need.

the settings file just imports functions.

Jeremy Englert over 4 years ago

I still think there is an issue here.

Even when I load the files in that order, the 'settings' file doesn't have access to any of the variables from foundation (such as $white, $ghost, $oil, etc).

For example, if I uncomment line #1385 in the settings.scss file (and keep the variable the same), I get the following error when compiling:

Error: Undefined variable: "$oil".

If I uncomment the $oil variable, it works fine - but since that is a global variable, shouldn't it already be defined?

Jeremy Englert over 4 years ago

@import "components/global"
@import "settings";
@import "foundation";

Also seems to work, but shouldn't the global settings be imported into the foundation.scss file? I don't remember having to import them separately before.

Rafi Benkual over 4 years ago

Ya it should be since all components @import "global"; but

because settings is imported before foundation, globals hasn't been loaded yet when using settings. So this means, in the settings file, you'd need to uncomment the colors you want to use:

// $white       : #FFFFFF;
// $ghost       : #FAFAFA;
// $snow        : #F9F9F9;
// $vapor       : #F6F6F6;
// $white-smoke : #F5F5F5;
// $silver      : #EFEFEF;
// $smoke       : #EEEEEE;
// $gainsboro   : #DDDDDD;
// $iron        : #CCCCCC;
 $base        : #AAAAAA;
// $aluminum    : #999999;
// $jumbo       : #888888;
// $monsoon     : #777777;
// $steel       : #666666;
// $charcoal    : #555555;
// $tuatara     : #444444;
 $oil         : #333333;
// $jet         : #222222;
// $black       : #000000;

I would not import globals at the top because you wouldn't be able to change variables.

This seems like the best way to have it for now, but we're experimenting with other options to make it easier to understand.

Cassio Arruda almost 4 years ago

Rafi! Thnaks!