Can't access Zurb Foundation global variables

Question

So I just recently installed Foundation 4 in a new project. However if I try to use the variables defined in the foundation_and_overrides.scss file I get an error saying that the variable was not found.

Example

application.css.scss

 /*
 *= require_self
 *= require foundation_and_overrides
 *= require navigation
 */

foundation_and_overrides.scss

 @import "foundation/foundation-global";
 $topbar-bg: #230F2B;
 @import "foundation";

navigation.css.scss

#welcome a:not(.button):hover{
  background: $topbar-bg;
}

I get the following error Undefined variable: "$topbar-bg".

However the override file works that the topbar actually changes colour, however it's just that I can't use this variable elsewhere.

Answer 1

Althaf try using @import instead of require

 @import 'foundation_and_overrides';

You will have to do the same for navigation @import allows the flow of variables but require first compiles the scss to css then ties them together so you lose the flow of variables.

So effectively you want something like this in your application.scss

Application.scss

/*
*= require_tree . 
*= stub navigation
*= require_self
*/

@import 'foundation_and_overrides';
@import 'navigation.css.scss';

Note that I exclude the navigation from the tree but not removing the tree because I assume you might have other files you may want included still

Navigation.css.scss

#welcome a:not(.button):hover
{
   background: $topbar-bg;
}

I hope it works for you.