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