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.
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'.
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?
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 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.
In your config.rb, you might have something like this:
require 'foundation'
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';
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
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).
来源：https://stackoverflow.com/questions/16388506/how-do-the-sass-variables-get-assigned-to-css-selectors-with-foundation-4