Menu icon Foundation
F5: @imports overriding sass backwards?

I can't get to understand this. I have the usual app.scss file, in which I'm importing other scss as advised:

@import "foundation/_settings";
@import "foundation";

//custom styles
@import "theme/colors";
@import "base/base";
@import "base/fonts";
@import "module/forms";
@import "module/buttons";
@import "layout/sidebar";
@import "layout/main-content";
---ETC---

I was expecting my custom styles to override foundations's, as the order of imports suggest. However, I have a problem with the top-bar and some breadcrumbs, which display with original styles.

If I move @import "foundation" to the end, after my styles, it works!

But then I cannot use foundation mixins and variables in my custom styles. What am I missing?

I'm using the grunt recommended installation.

Please help!

Foundation 5Sassapp.scssimport

I can't get to understand this. I have the usual app.scss file, in which I'm importing other scss as advised:

@import "foundation/_settings";
@import "foundation";

//custom styles
@import "theme/colors";
@import "base/base";
@import "base/fonts";
@import "module/forms";
@import "module/buttons";
@import "layout/sidebar";
@import "layout/main-content";
---ETC---

I was expecting my custom styles to override foundations's, as the order of imports suggest. However, I have a problem with the top-bar and some breadcrumbs, which display with original styles.

If I move @import "foundation" to the end, after my styles, it works!

But then I cannot use foundation mixins and variables in my custom styles. What am I missing?

I'm using the grunt recommended installation.

Please help!

Miguel Rivero almost 6 years ago

Another weird thing is that if I uncomment a variable in _settings.scss, the change is applied! Even if the same variable is used on one of my scss imported later, which does not seem to work.

Ideas please?

Samuel Rodda over 5 years ago

Did you ever get this sorted out Miguel? I'm using codekit 2 and having very similar problem with my app.scss @imports. I can make changes my topbar bg color, font size etc. when i move my foundation.scss file after my partial sass imports but nothing happens otherwise.

Samuel Rodda over 5 years ago

Okay... I think i got it working for me now. I had been defining new variables inside my custom @imports (aka. partial sass files). I moved them all inside my app.scss file AFTER the settings and foundations imports but before my new @import sass files. This seems to work great and has a reasonable workflow.

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

//=New Settings=

//CUSTOM GLOBAL
// We use these to define default font weights
$font-weight-normal: 300;
// We use these to make sure border radius matches unless we want it different.
$global-radius: 1px;
// We use these to control various global styles
$body-bg: #f2f2f2;
$body-font-color: #333;
$body-font-family: "Lato", sans-serif;

// TOPBAR
// Background color for the main topbar.
$topbar-bg-color: #FFA23C;
// Height and margin of topbar
$topbar-height: 45px;
// Controlling the styles for the title in the top bar
$topbar-title-font-size: rem-calc(17);

//=New Imports=
@import "custom-global";
@import "topbar";
@import "wraps";

Hope this helps someone else having the same issue as I did.