使用 gulp-svg-sprite 生成 SASS mixins？

Question

我正在使用 gulp-svg-sprite 插件。

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

我已经有了我的类和我想要精灵的样式：

    .header {
      background: grey;

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

这是我的 gulp 任务：

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

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

任务生成这种类型的 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;
    }

这并不理想，因为我需要导入这些我不会单独使用的 svg- 类，然后我需要使用 2 个扩展：

    .header {
      background: grey;

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

有没有一种方法可以生成 mixins，这样我就可以拥有类似的东西：

    .header {
      background: grey;

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

Answer 1

根据 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.

查看并自定义以下文件：

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

Answer 2

Danny H 是正确的。这是我的代码。请注意，我还在精灵配置中使用了前缀。

spriteConfig    = {
  mode          : {
    css         : {
      bust      : true,
      prefix    : "@mixin sprite-%s",
      render    : {
        scss: {
          template: 'sprite.scss.handlebars'
        }
      }
    }
  }
};

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

使用 gulp-svg-sprite 生成 SASS mixins？

Generate SASS mixins with gulp-svg-sprite?

svg

sprite

gulp