css - SASS:在 mixin 中添加扩展

Question

我有三个 sass 文件(包含所有必要的导入):

• 标题
• 变量
• Sprite

我有变量:

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

在标题中我正在调用:

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

在 Sprite 中:

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