How does SCSS locate partials?

Question

I'm looking through the bower foundation project and I'm getting stumped on how the project is able to locate the partials. In particular, I'm looking at the _settings.scss that has a relative reference in it I just don't quite understand.

On line 58 there is a reference to foundation/functions but this partial (_functions.scss) is a sibling of the settings partial. I'm confused as why there is a reference to the parent directory foundation on that line. I'm also confused as to how this works. Why would the settings file not look for a directory named foundation at the same level?

Answer 1

The answer becomes clear if you attempt to import a file that does not exist. Here's an excerpt of the error generated on http://sassmeister.com/ when you try to import "foo"; (which doesn't exist):

File to import not found or unreadable: foo.
Load paths:
  /app
  /app/lib/sass_modules
  /app/vendor/bundle/ruby/2.0.0/gems/compass-0.12.6/frameworks/blueprint/stylesheets
  /app/vendor/bundle/ruby/2.0.0/gems/compass-0.12.6/frameworks/compass/stylesheets
  /app/vendor/bundle/ruby/2.0.0/gems/susy-1.0.9/sass

If Sass begins searching for the requested file relative to each of those directories until it finds it.

For vanilla Sass, one would add extra paths via the --import-path option:

sass --watch test.scss:test.css --load-path ../path/to/lib/ --load-path ../path/to/otherlib/

Compass users would use additional_import_paths or add_import_path in their config.rb (see: http://compass-style.org/help/documentation/configuration-reference/)

add_import_path "../path/to/lib/"

Only the authors of Foundation can answer your specific question as to why they would write the import that way. But this is why it works.

Answer 2

Look at line 2 of your config.rb

add_import_path "bower_components/foundation/scss"

If you look at the sass in the file, the bower_components/foundation/_foundation.scss is just full of blanket imports for the rest of the components in foundation/components