Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

import

sass

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.

like image 402
spaaarky21 Avatar asked Jun 28 '11 06:06

spaaarky21


People also ask

Which directive is used to import files in Sass?

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.

How use Sass variable in another file?

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

How do I import an HTML file into Sass?

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.


1 Answers

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.

like image 86
Oliver Avatar answered Sep 21 '22 14:09

Oliver