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.
Sass Importing Files Just like CSS, Sass also supports the @import directive. The @import directive allows you to include the content of one file in another.
To use variables across multiple files in SASS is carried out by @import rule of SASS. @import rule which import Sass and CSS stylesheets for providing variables, @mixins and functions. Such that combine all stylesheets together for compiled css. It also imports URL such as frameworks like Bootstrap etc..
You can not "import" a SASS/SCSS file to an HTML document. SASS/SCSS is a CSS preprocessor that runs on the server and compiles to CSS code that your browser understands.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With