Can SASS mixins and variables sit in different files?

Question

Hi I am trying to organise my sass files into separate chunks on a project using GULP. However when I import my mixins and variables in 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 those mixins from other files for example

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

I get the following errors when running gulp sass:

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

or 

undefined variable 'foo'

In spite of the mixins/variable being defined in the variable.scss and mixins.scss files. So gulp interrupts the task half way though and the stylesheet is not created.

Is there a rule in SASS that means the variables and mixins must all be imported in the same files using them? If this is the case, it is a problem as I have a lot of files I would like to keep separate and not have to keep importing both mixins and variables inside them.

Answer 1

The short answer is you dont have to import them into everyfile that might include them. However there does need to be a relationship somewhere, and how you do this depends on whether or not you are looking to build one single final CSS file - or a series of individual files.

If you want the former, you could consider having a master import file that does little more than import all the appropriate *.scss files, and have this be the main SASS file your gulp build script looks to compile.

You'll need to take care to import files in the correct order - so no importing a file that uses a mixin before the file that defines the mixin has been imported it's self.

So for example - personally I work with a main.scss file that 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 built via gulp to create css/main.css.

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

Answer 2

I found the best solution for me with pre-concating SASS files 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 .......

Answer 3

It is most definitely possible to have your mixins and variables in different files. In fact, I'd recommend any mixins/variables that you find yourself reusing, you should take a more global approach with them instead of importing them into individual files.

One of the best ways I've seen for organizing a directory of Sass files is called The 7-1 Pattern and makes the entire structure of styling so much easier to understand and build upon.

The most applicable piece of this organizational strategy to your question would be creating a main.scss file that imports every one of the files you plan on using. Make sure you're careful about the order that you import, though. You can't import a file that uses mixins or variables from a file imported after it.