SASS：在mixin中添加扩展

Question

我有三个sass文件（包含所有必需的导入）：

• 头
• 变量
• 精灵

我有变量：

@mixin svg-sprite($sprite) {
  @extend .{$sprite};
  @extend .{$sprite}-res;
}

标题中的

呼叫：

@include svg-sprite(".logo");

并且在精灵中：

%svg-common {
    background: url("svg/sprite.view.svg") no-repeat;
}

.logo {
    @extend %svg-common;
    background-position: 0 58.3969465648855%;
}

.logo-res {
    width: 180px;
    height: 80px;
}

但是我遇到了错误：

Error: Invalid CSS after "  @extend": expected selector, was ".{$sprite};"
        on line ** of ****.scss
>>   @extend .{$sprite};

我做错了什么？

Answer 1

问题是您在#

内插图时忘记了mixin

代码行应如下所示

@mixin svg-sprite($sprite) {
  @extend #{$sprite};
  @extend #{$sprite}-res;
}