grunt-sass-globber
v2.0.3
Published
A grunt module which supports sass globbing.
Downloads
145
Maintainers
Readme
grunt-sass-globber
This is a grunt wrapper for sass-globber
.
This module provides a simple globbing functionality for sass files like the ruby gem sass-globbing
.
It reads a file from a defined directory and creates a new sass file with all @import
statements.
It also has a build-in watcher which watches your changes in your sassRoot
directory.
Installation
npm install grunt-sass-globber
Usage
Read styles.scss
, process its content, and output processed SCSS/Sass to styles.tmp.scss
with all @import
statements.
If styles.scss
has:
@import "../bower-components/pg-scss/resources/scss/pg-reset";
@import "../bower-components/pg-scss/resources/scss/_helpers/**/*";
@import "global/vars";
@import "../bower-components/pg-scss/resources/scss/pg";
@import "utils/**/*";
@import "global/base";
@import "global/font-face";
@import "global/modifiers";
@import "global/get-media";
@import "regions**/*";
@import "components/**/*";
@import "panels/**/*";
@import "blocks/**/*";
@import "global/print";
You will get the following output:
// This file is auto generated by the module sass-globbing.
//Do not edit this file manually!
@import "../bower-components/pg-scss/resources/scss/pg-reset";
@import "../bower-components/pg-scss/resources/scss/_helpers/_breakpoint";
@import "../bower-components/pg-scss/resources/scss/_helpers/_cp";
@import "global/vars";
@import "../bower-components/pg-scss/resources/scss/pg";
@import "utils/extends/_ex-fonts";
@import "utils/mixins/_mx-fonts";
@import "global/base";
@import "global/font-face";
@import "global/modifiers";
@import "global/get-media";
@import "regions/_r-footer-bottom";
@import "regions/_r-footer-top";
@import "components/_c-accordion";
@import "components/_c-cta";
@import "components/_c-text-image";
@import "components/form/_select";
@import "panels/_p-segment";
@import "panels/_p-zone";
@import "blocks/_b-footer-metalinks";
@import "blocks/_b-footer-nav";
@import "global/print";
Options
All options of sass-globber
are available.
Usage
You can enable this plugin in the Gruntfile.js
of your project like that:
grunt.loadNpmTasks('grunt-sass-globber');
Examples
Here is a standard grunt example with files
:
sassGlobber: {
options: {
sassRoot: 'tmp/sass',
},
dev: {
options: {
watch: true // or false
},
files: [{
'styles.tmp.scss': 'styles.scss'
}]
},
dist: {
options: {
watch: false
},
files: [{
'styles.tmp.scss': 'styles.scss'
}]
}
}
Instead of files
you can just use the options directly:
sassGlobber: {
options: {
sassRoot: 'tmp/sass',
source: 'styles.scss',
output: 'styles.temp.scss'
},
dev: {
options: {
watch: true // or false
}
},
dist: {
options: {
watch: false
}
}
}
Watch Task In Grunt
You do not need to define a watch task since version 2.0.0
. Just use the option watch
to use the super fast build-in watcher.
License
Copyright (c) 2015 Sebastian Fitzner. Licensed under the MIT license.