Erzeuge SASS Mixins mit Gulp-Svg-Sprite?

Question

Ich benutze das Gulp-Svg-Sprite-Plugin.

https://github.com/jkphl/gulp-svg-sprite

https://github.com/jkphl/svg-sprite

ich bereits meine Klassen und Stile haben die Ich mag würde Sprite:

.header { 
     background: grey; 

     &:after { 
     content: ""; 
     display: block; 
     height: 30px; 
     width: 30px; 
     background: url(images/icon1.svg); 
     } 
    } 

Das ist mein schluck Aufgabe:

spriteConfig = { 
     mode   : { 
     css  : { 
      bust  : true, 
      render : { 
      scss : true 
      } 
     } 
     } 
    }; 

    gulp.task('sprite', function() { 
     gulp.src('images/svg/*.svg') 
     .pipe(svgSprite(spriteConfig)) 
     .pipe(gulp.dest('dest/')); 
    }); 

Die Aufgabe erzeugt diese Art von 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; 
    } 

Dies ist nicht ideal, da ich diese SVG- Klassen importieren muß, die ich gewohnt dort selbst verwenden, und ich brauche dann 2 verwenden erweitert:

.header { 
     background: grey; 

     &:after { 
     content: ""; 
     display: block; 
     @extend .svg-icon1; 
     @extend .svg-icon1-dims; 
     } 
    } 

Gibt es einen Weg Mixins der Erzeugung statt, so konnte ich so etwas wie jsut:

.header { 
     background: grey; 

     &:after { 
     content: ""; 
     display: block; 
     @include svg-icon1; 
     } 
    } 

Answer 1

gemäß der docs:

Es kommt mit einer Reihe von Moustache Vorlagen zum Erstellen von Stylesheets in guten alten CSS oder eines der wichtigsten Pre-Prozessor-Formate (Sass, Less und Stylus). Das Anpassen der Vorlagen oder sogar das Hinzufügen Ihrer eigenen benutzerdefinierten Ausgabe Format ist wirklich einfach, genauso wie das Generieren eines HTML-Beispieldokuments zusammen mit Ihrem Sprite.

Werfen Sie einen Blick und passen Sie die folgende Datei:

https://github.com/jkphl/svg-sprite/blob/master/tmpl/css/sprite.scss

Answer 2

Danny H richtig war. Hier ist mein Code. Beachten Sie, dass ive in meinem SpriteConfig auch ein Präfix verwendet hat.

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}}