Menu icon Foundation
Sass overrides failing

I am trying to customize a UI component as described in the "Customize With Sass" section of the Breadcrumbs. I am having the exact same problem this person is: http://foundation.zurb.com/forum/posts/1778-help-with-top-bar-sass-overrides

In short -- my Sass overrides are not picked up, but any native CSS I put in my overrides file is picked up.

Setup:
- rails environment
- build/bundling happens with Middleman
- bower
- compass

compass config:
config.add_import_path "bower_components/foundation/scss"
config.http_path = "/"
config.css_dir = "css"
config.sass_dir = "css"
config.images_dir = "img"
config.javascripts_dir = "js"

I am only linking to one SCSS file in my ERB template, called app.scss.
@import "foundation.scss";
@import "custom_settings";
@import "foundation_settings";
@import "colors";
@import "fonts";
@import "typography";
@import "breadcrumbs";

So, that foundation.scss file has all of the Foundation components. It seems to be loaded from Bower.

I cannot put my overrides before the foundation.scss file, or I get an undefined variable error: $include-html-classes.

But it seems that foundation.scss file is the whole Foundation hog.

I tried editing the components in the bower directly, just to see if I could get some overrides to appear, but no.

Any tips?

Sass

I am trying to customize a UI component as described in the "Customize With Sass" section of the Breadcrumbs. I am having the exact same problem this person is: http://foundation.zurb.com/forum/posts/1778-help-with-top-bar-sass-overrides

In short -- my Sass overrides are not picked up, but any native CSS I put in my overrides file is picked up.

Setup:
- rails environment
- build/bundling happens with Middleman
- bower
- compass

compass config:
config.add_import_path "bower_components/foundation/scss"
config.http_path = "/"
config.css_dir = "css"
config.sass_dir = "css"
config.images_dir = "img"
config.javascripts_dir = "js"

I am only linking to one SCSS file in my ERB template, called app.scss.
@import "foundation.scss";
@import "custom_settings";
@import "foundation_settings";
@import "colors";
@import "fonts";
@import "typography";
@import "breadcrumbs";

So, that foundation.scss file has all of the Foundation components. It seems to be loaded from Bower.

I cannot put my overrides before the foundation.scss file, or I get an undefined variable error: $include-html-classes.

But it seems that foundation.scss file is the whole Foundation hog.

I tried editing the components in the bower directly, just to see if I could get some overrides to appear, but no.

Any tips?

Preston McPeak about 5 years ago

Hey,

You should be able to make your own edits to these styles in the app.scss file or create a new scss file and link it up into the HTML. Should solve your problem, but you can't make edits in the bower_components folder.