小编典典

如何使用Foundation 4将Sass变量分配给CSS选择器?

css

我已经搜索并搜索了所有内容,当然也查阅了相关文档,但是关于Foundation 4的一些事情,我似乎无法理解,涉及Sass的转换方式。

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

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

我的问题的后半部分:在app.scss中声明的变量如下`// $body-bg:

fff;:Sass如何知道CSS中该变量的含义?我找不到它分配给的任何地方body

{background}`。如果注释掉了,Sass怎么导入上面的变量(如我的例子)?_settings.scss中的几乎所有变量都被注释掉了。

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


阅读 263

收藏
2020-05-16

共1个答案

小编典典

与Compass一起使用时,Foundation称为 _CompassExtension_了解更多关于Extensions的信息。它基本上是Sass和Ruby文件的集合,这些文件以某种方式捆绑在一起,使它们无需复制文件即可用于您的项目。

在您的config.rb中,您可能会有类似以下内容:

require 'foundation'

这使得扩展可用于您的项目。至此,您所能使用的就是用Ruby编写的Sass函数。要引入Sass文件(mixins,主题等),您需要像这样导入它们:

@import 'foundation';

假设扩展使用推荐的命名约定和目录结构,它将包含来自扩展的名为_foundation.scss的文件,该文件通常会导入该扩展内的其他文件。

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

2020-05-16