如何将Sass变量分配给具有Foundation 4的CSS选择器?

时间:2013-05-05 19:55:01

标签: css sass zurb-foundation

我已经用Google搜索并搜索了这一切,当然还是通过了相关的文档,但是有一些关于基金会4的事情我似乎无法理解,关于Sass如何转换。

我使用create project命令设置了Compass的Foundation,因此Sass正在运行。 app.scss文件正在导入“settings”和“foundation”,并使用“watch”进行编译。

我的问题的前半部分:我理解app.css是从gem中的组件文件编译的(这句话有意义吗?),但我在哪里可以找到这些组件?例如,“基础/组件/全球”在哪里?

我的问题的后半部分:在app.scss中声明的变量,如// $body-bg: #fff;:Sass如何知道这个变量在CSS中的含义?我找不到任何地方,例如body {background}。如果Sass被注释掉(如我的例子中),Sass如何导入上述变量?几乎所有_settings.scss中的变量都被注释掉了。

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

1 个答案:

答案 0 :(得分:2)

与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

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