无法访问Zurb Foundation的全局变量

Question

所以我最近刚刚在一个新项目中安装了Foundation 4。但是，如果我尝试使用foundation_and_overrides.scss文件中定义的变量，则会收到错误消息，指出找不到该变量。

示例

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;
}

我收到以下错误Undefined variable: "$topbar-bg".

然而，覆盖文件的工作原理是顶部栏实际上会改变颜色，但这只是我无法在其他地方使用此变量。

Answer 1

Althaf尝试使用@import而不是require

 @import 'foundation_and_overrides';

你必须为导航做同样的事情@import允许变量流但是需要首先将scss编译为css然后将它们绑定在一起，这样你就失去了变量流。

你在application.scss

中有效地想要这样的东西

<强> Application.scss

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

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

请注意，我从树中排除了导航，但没有删除树，因为我假设您可能还有其他可能包含的文件

<强> Navigation.css.scss

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

我希望它适合你。

Answer 2

在没有看到太多代码的情况下，在我看来，您可能希望将foundation_and_overrides.scss文件实际导入navigation.css.scss。看起来$ topbar-bg变量只存在于该文件的范围内，而不是超出它。