importsass

When using SASS how can I import a file from a different directory?


In SASS, is it possible to import a file from another directory? For example, if I had a structure like this:

- root_directory
    - sub_directory_a
        - _common.scss
        - template.scss
    - sub_directory_b
        - more_styles.scss

template.scss could import _common.scss using @import "common" but is it possible for more_styles.scss to import _common.scss? I tried a few different things including @import "../sub_directory_a/common" and @import "../sub_directory_a/_common.scss" but nothing seems to work.


Solution

  • UPDATE: Please consider Mikka's answer first - it should work without flaw if you're only interested in including subdirectories. My answer is specific to including directories other than subdirectories, but works for those, too. But: It's not the idiomatic way to do it.


    Looks like some changes to SASS have made possible what you've initially tried doing:

    @import "../subdir/common";
    

    We even got this to work for some totally unrelated folder located in c:\projects\sass:

    @import "../../../../../../../../../../projects/sass/common";
    

    Just add enough ../ to be sure you'll end up at the drive root and you're good to go.

    Of course, this solution is far from pretty, but I couldn't get an import from a totally different folder to work, neither using I c:\projects\sass nor setting the environment variable SASS_PATH (from: :load_paths reference) to that same value.