# @import and globbing in 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 much to the `@import` directive, but there are 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:

```scss
// 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](http://en.wikipedia.org/wiki/Don%27t_repeat_yourself) or whatever, that’s
not really important though.

```scss
// 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](https://en.wikipedia.org/wiki/Glob_%28programming%29) (at the time of
writing this) out the box, but there's a Ruby package called
[sass-globbing](https://github.com/chriseppstein/sass-globbing), that enables
you to go like:

```scss
// Import all files in a dir
@import 'sass/*' // Import whole tree
  @import 'sass/**/*';
```

Start by installing it:

```shell
$ gem install sass-globbing
```

Then run Sass like:

```shell
$ 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](https://www.npmjs.com/package/grunt-sass-globbing)
package. Usage example might look something like this:

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

## Sass globbing in Gulp

There’s a great Gulp plugin with a slightly misleading name
[gulp-css-globbing](https://www.npmjs.com/package/gulp-css-globbing), it can
also do Sass globbing.

Install the plugin as a dev dependency:

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

Here's an example Sass task:

```js
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:

```scss
@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 is not recommended to use globs to load 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`.