Can SASS mixins and variables sit in different files?

Question

Hi, I am trying to organize my sass files into separate fragments of a project using GULP. However, when I import my mixins and variables into separate files:

File: variables.scss

//first import variables that might be used throughout all the other files @import "common/_variables.scss"; 

File: mixins.scss

 Mixins @import "common/_mixins.scss"; 

Then try to access these mixins from other files, for example

File: buttons.scss @import "common / _buttons.scss";

When starting gulp sass:

The following errors occur:

 throw er; // Unhandled 'error' event no mixin named 'foo' or undefined variable 'foo' 

Although mixins / variable is defined in variable.scss and mixins.scss files. Thus, gulp aborts the task halfway, although no stylesheet is created.

Is there a rule in SASS that means variables and mixins should all be imported into the same files using them? If so, this is a problem, because I have many files that I would like to save separately, and I do not need to import both mixins and variables into them.

Answer 1

Short answer: you dont have to import them into every file that can include them. However, there should be something somewhere, and how you do it depends on whether you want to create one final CSS file or a series of separate files.

If you want the first one, you might think that it has a main import file that does nothing more than import all the corresponding * .scss files, and let it be the main SASS file created by your gulp build script compilation.

You will need to take care to import the files in the correct order, so import the file that uses mixin before the file that defines mixin was imported by itself.

So, for example, I personally work with the main.scss file, which is structured as

 @import "common/_variables.scss"; @import "common/_mixins.scss"; // Now import the files that might use these vars/mixins @import "common/_buttons.scss"; 

which is created through gulp to create css / main.css .

If you need a series of CSS files, i.e. buttons.css, type.css, layout.css, etc., then you will need to have the appropriate variables and mixin @import declarations in each file that calls them.

Answer 2

It is definitely possible that your mixins and variables are in different files. In fact, I would recommend any mixins / variables that you reuse, you should use a more global approach with them, and not import them into separate files.

One of the best ways I've seen to organize a Sass file directory is called Template 7-1 and makes the whole style structure so easy to understand and build on.

The most appropriate part of this organizational strategy for your question would be to create a main.scss file that imports each of the files you plan to use. However, make sure that you are careful about the order you import. You cannot import a file that uses mixins or variables from a file imported after it.

Answer 3

I found the best solution for me with preliminary SASS data with GULP.

Like in this example for STYLUS

 gulp.src(config.projects.css.source) .pipe(sourcemaps.init()) .pipe(mktimecss(__dirname+'/web')) .pipe(concat('styles')) .pipe(stylus({ 'include css': true, use: [nib()], // compress: true, linenos: false })) ...... and so on .......