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

这是我的一项任务：

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

有没有一种方法可以产生mixin，所以我可以jsut有类似的东西：

    .header {
      background: grey;

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

Answer 1

根据docs：

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

查看并自定义以下文件：

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

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

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

2 个答案: