css - 无法访问 Zurb Foundation 全局变量

Question

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

例子

应用程序.css.scss

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

基础和覆盖.scss

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

导航.css.scss

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

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

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

score 1 · Accepted Answer

Altaf 尝试使用 @import 而不是 require

 @import 'foundation_and_overrides';

您必须为导航执行相同操作 @import 允许变量流，但需要首先将 scss 编译为 css，然后将它们联系在一起，这样您就失去了变量流。

如此有效地你想要在你的 application.scss 中有这样的东西

应用程序.scss

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

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

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

导航.css.scss

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

我希望这个对你有用。

score 0 · Accepted Answer

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

2 回答 2