clubmate.fi

A good[ish] website

Web development blog, loads of UI and JavaScript topics

@import and globbing in Sass

Filed under: Styling— 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.

This post is old :)

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

The basic @import

Projects main CSS file styles.scss, where all the modules get required. Here’s a real-world example from a project:

// 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';

You could also write it like this, it’s more DRY or whatever, that’s not really important though.

// 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',
...

Globbing

Sass doesn't support globbing (at the time of writing this) 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')
var sass = require('gulp-sass')
var 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.

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.

Comments would go here, but the commenting system isn’t ready yet, sorry.