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