clubmate.fi

A good[ish] website

Web development blog, loads of UI and JavaScript topics

@import and globbing in Sass

Filed under: HTML/CSS— Tagged with: grunt, gulp, sass

Here’s a short post on how to use the @import directive in Sass, also how to beef it up with Gulp.

There’s not too much meat around @import directive, but some tricks and tips to make life easier.

The basic repetitive @import

Projects main CSS file styles.scss, where all the modules get required, like this:

// Libraries
@import 'bower_components/scut/dist/scut';
@import 'bower_components/normalize-scss/normalize';

// Mixins
@import 'base/variables';
@import 'mixins/hotdog';
@import 'mixins/media-queries';

// Base
@import 'base/boilerplate-base';
@import 'base/reset';
@import 'base/base';

// Elements
@import 'elements/structure';
@import 'elements/links';
@import 'elements/typo';
@import 'elements/images';
@import 'elements/navigation';
@import 'elements/lists';
@import 'elements/buttons';
@import 'elements/misc';

// Helpers
@import 'helpers/boilerplate-helper-classes';
@import 'helpers/browsehappy';

// Utilities
@import 'utils/list-utilities';
@import 'utils/structure-utilities';
@import 'utils/typo-utilities';

// Print
@import 'print/print';

The quite not so repetitive @import

The above is very cool as it is, nothing alarming there. But it's not very DRY. The following is a bit better:

// Libraries
@import
'bower_components/scut/dist/scut',
'bower_components/normalize-scss/normalize',

// Vars
'base/variables',

// Mixins
'mixins/font-size',
'mixins/hotdog',
'mixins/input-paceholder-color',
'mixins/media-queries';

// Base
'base/boilerplate-base',
'base/reset',
'base/base',

// Elements
'elements/structure',
'elements/links',
'elements/typo',
...

Note: some Sass syntax highlighters, like the "TextMate SCSS Official Bundle", that a lot of us use in Sublime Text, are not up to par these days. For instance it doesn't react to commented lines inside the @import.

That doesn't mean comments are not allowed there, they are.

If you're on Sublime Text, the Syntax Highlighting for Sass is a good up-to-date alternative. Install it via package manager.

Sass globbing

Sass doesn't support globbing out the box, but there's a Ruby package called sass-globbing, that enables you to go like:

// Import all files in a dir
@import 'sass/*'

// Import whole tree
@import 'sass/**/*'

Start by installing it:

$ gem install sass-globbing

Then run Sass like:

$ sass -r sass-globbing --watch sass_dir:css_dir

Presumably, most of us use Sass via task runner such as Gulp or Grunt, let's look into those next.

Sass globbing in Grunt

There's a grunt-sass-globbing package. Usage example might look something like this:

grunt.initConfig({
    sass_globbing: {
    your_target: {
        files: {
        'src/_importMap.scss': 'src/partials/**/*.scss',
        'src/_variblesMap.scss': 'src/variables/**/*.scss',
        },
        options: {
        useSingleQuoates: false
        }
    }
    }
});

Sass globbing in Gulp

There's a great Gulp plugin that has maybe a bit misleading name gulp-css-globbing, it can also do Sass globbing.

Install the plugin as a dev dependency:

$ npm install --save-dev gulp-css-globbing

Here's an example Sass task:

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    globbing = require('gulp-css-globbing');

gulp.task('sass', function() {
    return gulp.src('src/main.scss')
    .pipe(globbing({
        // Configure it to use SCSS files
        extensions: ['.scss']
    }))
    .pipe(sass())
    .pipe(gulp.dest('dist/css'));
});

Then in your master sass file:

@import 'mixins/*'

Note: the following examples won't work:

@import
'bower_components/scut/dist/scut',
'bower_components/normalize-scss/normalize',

// Vars
'base/variables',

// Mixins
'mixins/*'
...

It has to be it's own import @import 'mixins/*'.

A word about the file load order

Globs load files in the order they are in the directory, and since CSS is order dependent (later rules override), it's not recommended to use globs to load in all files, just dependencies or mixins for example.

The hypothetical @import loop

I was just thinking that, how sweet would it be if we could emit Sass code with a loop. Sass loops inherently emit only CSS. This would be pretty sweet:

$deps:
    'bower_components/scut/dist/scut',
    'vendor/quokka',
    'base/variables',
    'base/reset',
    'base/mixins',
    'base/normalize',
    'base/boilerplate-base-styles',
    'base/base-styles',
    'utilities/_util-structure',
    'utilities/_util-typo';

@each $dep in $deps {
    @import $dep;
}

But that wont work, of course, silly me.

Also variable interpolation in the paths would be great, but it won't work:

// Mixins
$path: mixins;
@import
'#{$path}/font-size',
'#{$path}/hotdog',
'#{$path}/input-paceholder-color',
'#{$path}/media-queries';

More here, and here.

Thoughts and conclusions

The @import is a bit old and scanty, but the people at Sass know this, from the Sass blog (emphasis mine):

The big feature for 4.0 is going to be @import, or rather the lack thereof. Our current import system is beginning to show its age in a major way, and we intend to replace it wholesale, up to and including the name. As of 4.0, the recommended way of pulling in other Sass files will be @use.

See an [interesting issue][issue] on the import. And a similar one at Libsass. Also see the 4.0 milestone.

Comments would go here, but the commenting system isn’t ready yet, sorry. Tweet me @hiljaa if you want to make a correction etc.