在Foundation中使用變量和mixins

Question

我發現了很多類似的問題，但沒有完全解決我的問題。基本上，我在rails 3.x上使用基礎4.x，一切工作正常，包含在我的application.css中的foundation_and_overrides。我可以修改foundation_and_overrides中的變量，它一切正常。但是，我想在其他一個scss文件（application/global.css.scss）中使用$ primary-color變量（和其他許多變量）。如果我在我的全局css文件中使用@import「foudation_and_overrides」，那麼它可以工作，但它在我編譯的application.css中包含整個Foundation CSS兩次，這顯然不理想。

我也想用混入，如在我的全局文件@include半徑（）。如果我使用@import「foundation/components/global」，這個方法就行得通了 - 但是這也會導致編譯重複的CSS。我想要做的就是使用全局變量&函數，而不是CSS - 當然這是一個非常常見的事情嗎？

以前（之前的基礎），我只是把一個助手文件我所有的SCSS功能，並且在需要它的所有其他SCSS文件導入此。

另一種快速的Q，而我在這裏，什麼課我用它來添加旁邊的小三角下拉事一些自定義的文本？

謝謝！

Answer 1

有了新的基礎，你這樣做：

$include-html-global-classes: false; 
@import "foundation/components/global"; 

• 更新了，甚至新的基礎（見註釋）

早些時候路徑是

@import "foundation/foundation-global"; 

Answer 2

還有一堆名字類似，包括電網，CSS或_settings.scss或_variables.scss像這樣的Sass變量。您可以關閉它們，以便它不會生成所有這些標準的表示類。如果您感到困惑，只需跳到其中一個源代碼中，您將在文件底部看到if語句，該語句會導致使用文件頂部的mixins生成所有css。希望這一點。

Answer 3

正如詹姆斯說，你可以設置變量$包括HTML的類爲false，也不會任何的樣式複製到CSS。您可以將以下幾行添加到任何scss表格中以訪問變量和mixin。

$include-html-classes: false; 
@import "foundation"; 

Answer 4

只保留設置在foundation_and_overrides.scss

在文件末尾刪除以下行foundation_and_overrides.scss：

@import "foundation"; 

也許重命名foundation_and_overrides.scss到一個更合適的foundation_settings.scss 。

取消註釋，你會在你的SASS文件中使用的所有設置。這也明確了您將在您的應用程序文件中使用哪些基礎設置。在application.scss

在 「application.scss」

使用@import確保使用@import而不是require兩個基金會和它的設置。

/* 
*= require_tree . 
*= require_self 
*/ 

@import "foundation_settings"; 
@import "foundation"; 

在您的應用程序文件

用粉底設置

您可以簡單地添加下面一行在你的文件需要訪問基金會變量：

@import "foundation_settings"; 

我還沒有測試過這個混入，但它的工作變量，並防止重複的代碼。