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.

Solution 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

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

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

Comments

[HGB]

Hey, thanks for your answer. Yes, I figured. It's a shame that the variables are not visible if imported separately for all of the files. I guess I will have to stick to one file then only minify when I have finished to debug. Cheers

[petehotchkiss]

worth remembering that variables aren't directly imported into compiled CSS other than where you explicitly call them to be. so including the link to your varialbes .scss file in multiple other files wont impact on the size of the final compiled source.

[HGB]

Hey thanks, does this mean I could inmport the variables.scss document in every separate sass file without affecting the compiled source?

[matthew]

You do not need to "cross import" mixins or variable files into other .scss files. Just make sure you import the _variable.scss and _mixins.scss files into your main.scss file before any other stylesheets.