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