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

【问题标题】：Generate SASS mixins with gulp-svg-sprite?使用 gulp-svg-sprite 生成 SASS mixins？
【发布时间】：2016-04-21 01:10:25
【问题描述】：

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

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

https://github.com/jkphl/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;
      }
    }

【问题讨论】：

标签： svg gulp sprite

【解决方案1】：

根据docs：

它带有一组 Mustache 模板，用于在好的 ol' CSS 或主要的预处理器格式之一（Sass、Less 和手写笔）。调整模板甚至添加您自己的自定义输出 format 真的很简单，就像打开 HTML 的生成一样示例文档以及您的精灵。

查看并自定义以下文件：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：