A good[ish] website
Web development blog, loads of UI and JavaScript topics
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.
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 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 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.
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
}
}
}
});
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/*'
.
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.
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';
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.