【问题标题】：Using variables and mixins in Foundation在 Foundation 中使用变量和 mixin
【发布时间】：2013-07-23 05:44:51
【问题描述】：

我发现了很多与这个问题类似的问题，但没有什么能完全解决我的问题。基本上，我使用的是基础 4.x 和 rails 3.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 两次，这显然不理想。

我还想在我的全局文件中使用 mixins，例如 @include radius()。如果我使用 @import "foundation/components/global" 这可以工作——但这也会导致重复的 CSS 被编译。我想做的就是使用全局变量和函数，而不是 CSS——这肯定是一件很常见的事情吗？

以前（在基础之前）我只是将我所有的 scss 函数放在一个 helpers 文件中，然后将它导入到所有其他需要它的 scss 文件中。

我在这里的另一个快速问题是，我使用什么类来在一些自定义文本旁边添加小下拉三角形？

谢谢！

【问题讨论】：

标签： ruby-on-rails zurb-foundation

【解决方案1】：

有了新的基础，你可以这样做：

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

针对更新的基础进行了更新（参见评论）

之前的路径是

@import "foundation/foundation-global";

【讨论】：

路径是@import "foundation/components/global";但否则这行得通，谢谢！

【解决方案2】：

正如 James 所说，您可以将变量 $include-html-classes 设置为 false，它不会将任何样式复制到 css。您可以将以下行添加到任何 scss 工作表以访问变量和 mixins。

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

【讨论】：

我有一个问题，该代码在输出中包含一些乱码。 pastebin.com/kPMy36Na

【解决方案3】：

在 _settings.scss 或 _variables.scss 中有一堆名为 include-grid-css 或类似名称的 Sass 变量。您可以将它们关闭，这样它就不会生成所有这些标准的演示类。如果您感到困惑，只需跳转到其中一个的源代码，您将在文件底部看到，有一个 if 语句导致所有这些 css 都使用文件顶部的 mixins 生成。希望这能有所帮助。

【讨论】：

【解决方案4】：

只保留 foundation_and_overrides.scss 中的设置

删除文件 foundation_and_overrides.scss 末尾的以下行：

@import "foundation";

也许将 foundation_and_overrides.scss 重命名为更合适的 foundation_settings.scss。

取消注释您将在您的 SASS 文件中使用的所有设置。这也明确了您将在应用程序文件中使用哪些 Foundation 设置。

在application.scss中使用@import

在“application.scss”中，确保 Foundation 及其设置都使用 @import 而不是 require。

/*
 *= require_tree .
 *= require_self
 */

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

在您的应用程序文件中使用 Foundation 设置

您只需在需要访问 Foundation 变量的文件中添加以下行：

@import "foundation_settings";

我还没有使用 mixins 对此进行测试，但是对于变量它可以工作并防止重复代码。

【讨论】：