How does SCSS locate partials?

2020-02-14 19:54发布

问题:

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?

回答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.



回答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