SASS：将在混入

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