Order of partial imports

[nenadjelovac]

There is a bug (kind of) in order of imports for settings section. Inuit's settings.defaults should come last (to be double positive), not first in that section. Otherwise $inuit-base-spacing-unit always equals to 24px (which is default value for $inuit-base-line-height), no matter if you happen to set $inuit-base-line-height to a different value in your settings.global.

It believe it is because scss compile doesn't "go back" (so to say) when compiling.

So this line: $inuit-base-spacing-unit: $inuit-base-line-height;

equals to this:

$inuit-base-spacing-unit: 24px;

because at the moment compiler got to $inuit-base-spacing-unit the value of $inuit-base-line-height was 24px, and it doesn't go back to fix it the next time it encounters $inuit-base-line-height (with a different value).

It makes sense actually if you read about how !default works and if you know SCSS compiler is a PREprocessor :)

I found out about this the hard way in one of the projects I'm using inuit but forgot to make an issue on inuit repo. As I said the solution is to first set all your project variables and then include framework default settings.

[csswizardry]

Hmm, it’s not apparent in this project, but this is how you’d override the font size and line height that comes with inuitcss:

/**
 * #SETTINGS
 */
$inuit-base-font-size:      12px;
$inuit-base-line-height:    18px;
@import "bower_components/inuit-defaults/settings.defaults";
@import "settings.global";
@import "settings.colors";
@import "settings.responsive";

This way always works; if I were to do it another way, you would need the defaults import to appear last.

[nenadjelovac]

Hmm, it’s not apparent in this project

Yes, my bad. I just wanted to point it out because there are a lot of people that prefer to keep variables in separate partials instead of main .scss file (me being one of them :)).

I have something like this:

@import 'settings.global';
@import "settings.colors";
@import "settings.responsive";
@import 'settings.inuit';
@import 'bower_components/inuit-defaults/settings.defaults';

With all of inuit based settings in its own file. And I must say it is getting big since there is a lot of inuit's framework that I am using ;) Bravo for inuit! :)

[csswizardry]

Cool, I need to make sure I make this clear to people then. Thanks for flagging it up!

[nenadjelovac]

No problem! ;)