Include all the .scss files in a directory by including a dynamically maintained _*.scss file.
Include all the _.scss files in a directory by including a dynamically maintained
But for me, source order isn't important: I like to have directories full of partials that should be independent from each other, especially when I'm using a system like SMACSS, where I have things like directories full of modules, mixins, functions, etc.
Using this task, you just add an
_all.scss to any directory where you'd like to be able to import everything. This task will write all the necessary @imports to it so that when you @import that
_all.scss partial, you will import all other partials in the directory.
Note: this plugin does not include non-partials, or
*.scss files not prefixed by an underscore. Those get turned into regular
.css files, and don't make sense to me as something that should be automatically swept up in other includes.
You can read more in my original blog post.
Note: If you're not Grunt-oriented, there's actually a more full-featured alternative available as a ruby gem: Chris Eppstein's Sass Globbing.
This plugin requires Grunt
If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:
npm install grunt-sass-directory-import --save-dev
In your project's Gruntfile, add a section named
sass_directory_import to the data object passed into
Important: When you execute your tasks, this task needs to be executed before your Compass task, or whatever task compiles your
gruntinitConfigsass_directory_import:your_target:// Target-specific file lists and/or options go here.files:// The file pattern to add @imports to.// The name of the file is arbitrary - I like "all".src: 'path/to/scss/files/**/_all.scss'
This plugin writes
@import statements, which use quotes. By default, they're double quotes, but maybe you have a linter on your Sass (yay!) and want to use single quotes. Set this to 'single'.
By default, this plugin outputs information about the files it finds to your Grunt output.
Set to true to quiet this.
Find any _all.scss directories in your scss folder and subfolders and add @imports to them to any partials (
_*.scss files) in that directory.
Search for files named
_everything.scss and suppress output to your Grunt process.
gruntinitConfigsass_directory_import:options:quiet: truefiles:src: 'src/scss/**/_everything.scss'
In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.
9-6-2013 - Initial release.