Menu icon Foundation
changes in _custom.scss don't overwrite app.css (but changes in _settings.scss do)

I would like to customize the style of Foundation. I found this topic http://foundation.zurb.com/forum/posts/277-custom-css-with-sass and created a file in scss/_custom.scss

in the "app.scss" I added the line "@import "custom";" so here is what I have in app.scss

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


// Import custom styles
@import "custom";

// Or selectively include components
// @import
//   "foundation/components/accordion",
//   "foundation/components/alert-boxes",
//   "foundation/components/block-grid",
//   "foundation/components/breadcrumbs",
//   "foundation/components/button-groups",
//   "foundation/components/buttons",
//   "foundation/components/clearing",
//   "foundation/components/dropdown",
//   "foundation/components/dropdown-buttons",
//   "foundation/components/flex-video",
//   "foundation/components/forms",
//   "foundation/components/grid",
//   "foundation/components/inline-lists",
//   "foundation/components/joyride",
//   "foundation/components/keystrokes",
//   "foundation/components/labels",
//   "foundation/components/magellan",
//   "foundation/components/orbit",
//   "foundation/components/pagination",
//   "foundation/components/panels",
//   "foundation/components/pricing-tables",
//   "foundation/components/progress-bars",
//   "foundation/components/reveal",
//   "foundation/components/side-nav",
//   "foundation/components/split-buttons",
//   "foundation/components/sub-nav",
//   "foundation/components/switch",
//   "foundation/components/tables",
//   "foundation/components/tabs",
//   "foundation/components/thumbs",
//   "foundation/components/tooltips",
//   "foundation/components/top-bar",
//   "foundation/components/type",
//   "foundation/components/offcanvas",
//   "foundation/components/visibility";
            

         

And in the _custom.scss file there is just the code to change the background-color :

$include-html-top-bar-classes: $include-html-classes;

/* Background color for the top bar */
$topbar-bg: red;

But it doesn't work.
In the command prompt this is what I have when I make a change in _custom.scss

>>> Change detected at 12:35:28 to: _custom.scss
identical stylesheets/app.css

=> it doesn't work

And when I make the same change in _settings.scss

>>> Change detected at 12:35:28 to: _custom.scss
identical stylesheets/app.css

=> it works

So where is the problem ? (I'm a complete beginner with Sass/compass/Foundation and I'm learning little by little)

customstyling

I would like to customize the style of Foundation. I found this topic http://foundation.zurb.com/forum/posts/277-custom-css-with-sass and created a file in scss/_custom.scss

in the "app.scss" I added the line "@import "custom";" so here is what I have in app.scss

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


// Import custom styles
@import "custom";

// Or selectively include components
// @import
//   "foundation/components/accordion",
//   "foundation/components/alert-boxes",
//   "foundation/components/block-grid",
//   "foundation/components/breadcrumbs",
//   "foundation/components/button-groups",
//   "foundation/components/buttons",
//   "foundation/components/clearing",
//   "foundation/components/dropdown",
//   "foundation/components/dropdown-buttons",
//   "foundation/components/flex-video",
//   "foundation/components/forms",
//   "foundation/components/grid",
//   "foundation/components/inline-lists",
//   "foundation/components/joyride",
//   "foundation/components/keystrokes",
//   "foundation/components/labels",
//   "foundation/components/magellan",
//   "foundation/components/orbit",
//   "foundation/components/pagination",
//   "foundation/components/panels",
//   "foundation/components/pricing-tables",
//   "foundation/components/progress-bars",
//   "foundation/components/reveal",
//   "foundation/components/side-nav",
//   "foundation/components/split-buttons",
//   "foundation/components/sub-nav",
//   "foundation/components/switch",
//   "foundation/components/tables",
//   "foundation/components/tabs",
//   "foundation/components/thumbs",
//   "foundation/components/tooltips",
//   "foundation/components/top-bar",
//   "foundation/components/type",
//   "foundation/components/offcanvas",
//   "foundation/components/visibility";
            

         

And in the _custom.scss file there is just the code to change the background-color :

$include-html-top-bar-classes: $include-html-classes;

/* Background color for the top bar */
$topbar-bg: red;

But it doesn't work.
In the command prompt this is what I have when I make a change in _custom.scss

>>> Change detected at 12:35:28 to: _custom.scss
identical stylesheets/app.css

=> it doesn't work

And when I make the same change in _settings.scss

>>> Change detected at 12:35:28 to: _custom.scss
identical stylesheets/app.css

=> it works

So where is the problem ? (I'm a complete beginner with Sass/compass/Foundation and I'm learning little by little)

This post has been closed. No new replies can be added.

Rafi Benkual almost 5 years ago

Are you trying to make css overrides? You have an app.css file under stylesheets for that. _settings.scss is for SCSS changes.

That should be all you need.

Gavnosis almost 5 years ago

Hello,

I had a similar problem with this, also to style the navbar, and created an _overrides.scss partial which I called from app.scss (_overrides.scss in the same directory as app.scss)

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

The code inside overrides with a different colour, something like this:

$topbar-bg: #5ba3af;

And it didn't work either ...until I switched it around!! : -)

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

overides before settings, and Compass 'did the business' Ta-da!

Yorgo Hoebeke almost 5 years ago

Thank you a lot Gavnosis ! It works now !
(but I still have a lot of trouble customizing the top bar with sass haha)