如何使用Foundation 4将Sass变量分配给CSS选择器？ [英] How do the Sass variables get assigned to CSS selectors with Foundation 4?

问题描述

我已经搜索和搜索所有这一切，当然通过相关的文档，但有一些关于Foundation 4的事情，我似乎不能得到我的头，有关Sass转换。

I've googled and searched all over this, and of course gone through the relevant documentation, but there is a couple of things about Foundation 4 I just can't seem to get my head around, relating to how Sass converts.

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

I have set up Foundation with Compass, using the create project command, so Sass is running. The app.scss file is importing "settings" and "foundation", and being compiled with 'watch'.

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

First half of my question: I understand that app.css is compiled from the component files in the gem (does that sentence make sense?), but where can I find these components? Where is "foundation/components/global" for instance?

我的问题的第二部分：app.scss中声明的变量，如 // $ body-bg：#fff; ：Sass如何知道这个变量与CSS有什么关系？我找不到分配给它的任何地方，例如 body {background} 。另外，如果注释掉（如我的例子），Sass如何导入上面的变量？

Second half of my question: The variables declared in app.scss like // $body-bg: #fff;: How does Sass know what this variable relates to in the CSS? I cannot find anywhere where it is being assigned to, say, body {background}. Also how does Sass import the above variable if it is commented out (as in my example)? Nearly all the variables in _settings.scss are commented out.

我花了几天时间试图获得这个，我觉得我错过了一些非常明显的蠢事，但是，我觉得我几乎要把我的笔记本电脑从窗口：（

I have spent days trying to get this and I feel like I'm missing some really obvious silly thing, but I feel nearly that I want to throw my laptop out the window :(

推荐答案

Foundation与Compass一起使用时， em>指南针扩展（详细了解扩展），基本上是

Foundation when used with Compass is what's called a Compass Extension (learn more about Extensions). It's basically a collection of Sass and Ruby files bundled in a way that makes them that makes them available to your project without having to copy the files.

在你的config.rb文件中，你可能会看到，有这样的：

In your config.rb, you might have something like this:

require 'foundation'

这使得你的项目可以使用这个扩展。此时，你可以使用的是用Ruby编写的Sass函数。要引入Sass文件（mixins，主题等），你需要像这样导入：

That's making the extension available to your project. At this point, all you have available to you are the Sass functions that are written in Ruby. To bring in the Sass files (mixins, themes, etc.), you need to import them like this:

@import 'foundation';

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

Assuming the extension uses the recommended naming conventions and directory structure, it will include a file named _foundation.scss from the extension, which typically imports a bunch of other files that are within the extension. This is what Foundation's master import file looks like: https://github.com/zurb/foundation/blob/master/scss/foundation.scss

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

The specifics of which variable is used how can be discovered by looking at the source: https://github.com/zurb/foundation

扩展中的变量通常具有默认值集。您的设置文件允许覆盖这些值，并以典型的配置文件样式写入（即，列出默认值，但注释掉）。

Variables in extensions typically have a default value set. Your settings file is giving you the option of overriding these values and is written in the typical of configuration file style (ie. default values are listed but commented out).

这篇关于如何使用Foundation 4将Sass变量分配给CSS选择器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！