無法訪問Zurb基金會全局變量

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

沒有看到太多的代碼，在我看來，你會想要導入foundation_and_overrides.scss文件到navigation.css.scss。它看起來像$ topbar-bg變量只存在於該文件的範圍內，並沒有超出它。

Answer 2

Althaf嘗試使用@import，而不是需要

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

我希望它適合你。