在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"; 

我还没有测试过这个混入，但它的工作变量，并防止重复的代码。