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?
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.
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