Compass, adding import path

Question

To compile .scss files in multiple directories we need to use \"add_import_path\" (http://compass-style.org/help/tutorials/configuration-reference/), but i dont get how.

Answer 1

To compile multiple .scss files you should import the "child" files into the "parent" SASS file using @import "filename";.

For example if you have main.scss, you might want to import more CSS from a child stylesheet called for example child.scss like this:

@import "_modules/child";

From what I understand, all that add_import_path does is allow you to import files from an additional directory. So you can also @import from _themes/

See this thread.

Answer 2

There's an accepted answer here, but I don't think it answers the question, but gives an alternate solution. Which is absolutely fine and I'm not trying to insult anyone, but what's not here is information on add_import_path and what it does for you.

If anyone's ever worked in Magento, you're familiar with it's fallback structure for theming and template files. For setting up multiple stores that utilized the same default skin, we needed to include a fallback structure which would allow for changes over a pre-defined hierarchy. So check dis config.rb file

myThemeA - config.rb

require "font-awesome-sass"
http_path = "/skin/frontend/rwd/myThemeA/"
add_import_path "../../../rwd/default/scss"
css_dir = "../css"
sass_dir = "../scss"
images_dir = "../images"
javascripts_dir = "../js"
fonts_dir = "../css/fonts"
relative_assets = true

output_style = :expanded
environment = :production
sourcemap = true

myThemeB - config.rb

require "font-awesome-sass"
http_path = "/skin/frontend/rwd/myThemeB/"
add_import_path "../../../rwd/default/scss"
additional_import_paths = ["../../../rwd/myThemeA/scss"]
css_dir = "../css"
sass_dir = "../scss"
images_dir = "../images"
javascripts_dir = "../js"
fonts_dir = "../../myThemeA/css/fonts"
relative_assets = true

output_style = :expanded
environment = :production
sourcemap = true

So the idea here is that we have three skins and we can use import paths to only override certain files instead of including EVERY file in EVERY skin. Which also mean, when we want to make global changes, depending on what we change, we don't have the make the change 3 times--only to where it's dependency would lay in the chain.

So...

default is the base of all skins

myThemeA is the skin by itself and uses default as it's default

myThemeB uses myThemeA as it's default, while myThemeA uses default as it's default.

What makes this work is the placement of add_import_path and additional_import_paths. Essentially, it uses the add_import_path defined first as the default and then the subsequent additional_import_paths array will override what was in add_import_path, but anything that wasn't included in the additional, it will go look for in the default.

Hope this makes sense to anyone looking for more info on import paths.