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