Sass 变量如何分配给 Foundation 4 的 CSS 选择器？

Question

我已经用谷歌搜索了这一切，当然也浏览了相关文档，但是关于 Foundation 4 的一些事情我似乎无法理解，与 Sass 的转换方式有关。

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

我的问题的前半部分：我知道 app.css 是从 gem 中的组件文件编译而来的（这句话有意义吗？），但是我在哪里可以找到这些组件？例如，“基础/组件/全局”在哪里？

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

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

Answer 1

与 Compass 一起使用时的基础是所谓的 Compass 扩展 (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

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