无法访问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变量只存在于该文件的范围内而不是它。