css - Foundation 4 如何将 Sass 变量分配给 CSS 选择器？

Question

我已经在谷歌上进行了全面搜索，当然还查阅了相关文档，但是关于 Foundation 4 有几件事我似乎无法理解，与 Sass 的转换方式有关。

我已经使用 create project 命令用 Compass 设置了 Foundation，所以 Sass 正在运行。 app.scss 文件正在导入“settings”和“foundation”，并使用“watch”进行编译。

我的问题的前半部分:我知道 app.css 是从 gem 中的组件文件编译而来的(这句话有意义吗？)，但是我在哪里可以找到这些组件？例如，“foundation/components/global”在哪里？

我的问题的后半部分:在 app.scss 中声明的变量如 //$body-bg: #fff;:Sass 如何知道这个变量在 CSS 中与什么相关？我找不到它被分配到的任何地方，比如 body {background}。另外，如果上面的变量被注释掉(如我的示例)，Sass 如何导入它？ _settings.scss 中的几乎所有变量都被注释掉了。

我花了好几天的时间试图得到这个，我觉得我错过了一些非常明显的愚蠢的东西，但我几乎觉得我想把我的笔记本电脑扔出窗外:(

Answer 1

与 Compass 一起使用时的基础是所谓的 Compass Extension ( learn more about Extensions )。它基本上是 Sass 和 Ruby 文件的集合，以某种方式捆绑在一起，使它们无需复制文件即可用于您的元素。

在你的 config.rb 中，你可能有这样的东西:

require 'foundation'

这就是使扩展可用于您的元素。此时，您可以使用的是用 Ruby 编写的 Sass 函数。要引入 Sass 文件(mixins、主题等)，您需要像这样导入它们:

@import 'foundation';

假设扩展使用推荐的命名约定和目录结构，它将包含扩展中名为 _foundation.scss 的文件，该文件通常会导入扩展中的一堆其他文件。这是 Foundation 的主导入文件的样子:https://github.com/zurb/foundation/blob/master/scss/foundation.scss

通过查看源代码可以发现使用哪个变量的细节:https://github.com/zurb/foundation

扩展中的变量通常有一个默认值集。您的设置文件为您提供了覆盖这些值的选项，并以典型的配置文件样式编写(即列出了默认值但注释掉了)。