Generate SASS mixins with gulp-svg-sprite? - svg

Question

Im using the gulp-svg-sprite plugin.
https://github.com/jkphl/gulp-svg-sprite
https://github.com/jkphl/svg-sprite
I already have my classes and styles which I would like to sprite:
.header {
background: grey;
&:after {
content: "";
display: block;
height: 30px;
width: 30px;
background: url(images/icon1.svg);
}
}
This is my gulp task:
spriteConfig = {
mode : {
css : {
bust : true,
render : {
scss : true
}
}
}
};
gulp.task('sprite', function() {
gulp.src('images/svg/*.svg')
.pipe(svgSprite(spriteConfig))
.pipe(gulp.dest('dest/'));
});
The task generates this type of SASS:
%svg-common {
background: url("svg/sprite.css-c3700f6a.svg") no-repeat;
}
.svg-icon1 {
#extend %svg-common;
background-position: 50% 0;
}
.svg-icon1-dims {
width: 1024px;
height: 348px;
}
This isnt ideal as I need to import these svg- classes which I wont use on there own, and I then need to use 2 extends:
.header {
background: grey;
&:after {
content: "";
display: block;
#extend .svg-icon1;
#extend .svg-icon1-dims;
}
}
Is there a way of generating mixins instead so I could jsut have something like:
.header {
background: grey;
&:after {
content: "";
display: block;
#include svg-icon1;
}
}

Answer 1

As per the docs:
It comes with a set of Mustache templates for creating stylesheets in
good ol' CSS or one of the major pre-processor formats (Sass, Less and
Stylus). Tweaking the templates or even adding your own custom output
format is really easy, just as switching on the generation of an HTML
example document along with your sprite.
Have a look and customize the following file:
https://github.com/jkphl/svg-sprite/blob/master/tmpl/css/sprite.scss

Answer 2

Danny H was correct. Here is my code. Notice that ive also used a prefix in my spriteConfig.
spriteConfig = {
mode : {
css : {
bust : true,
prefix : "#mixin sprite-%s",
render : {
scss: {
template: 'sprite.scss.handlebars'
}
}
}
}
};
In sprite.scss.handlebars:
{{#hasMixin}}#mixin {{mixinName}} {
background: url("{{{sprite}}}") no-repeat;
}
{{#hasCommon}}.{{commonName}} {
#include {{mixinName}};
}
{{/hasCommon}}{{/hasMixin}}{{^hasMixin}}{{#hasCommon}}.{{/hasCommon}}{{^hasCommon}}#mixin {{/hasCommon}}{{commonName}} {
background: url("{{{sprite}}}") no-repeat;
}
{{/hasMixin}}{{#shapes}}{{#selector.shape}}{{expression}}{{^last}},
{{/last}}{{/selector.shape}} {
{{^hasCommon}}{{#hasMixin}}#include {{mixinName}};{{/hasMixin}}{{^hasMixin}}#include {{commonName}};{{/hasMixin}}
{{/hasCommon}}background-position: {{position.relative.xy}};{{#dimensions.inline}}
width: {{width.outer}}px;
height: {{height.outer}}px;{{/dimensions.inline}}
width: {{width.outer}}px;
height: {{height.outer}}px;
}
{{/shapes}}