brabertaser19 brabertaser19 - 5 months ago 45
Sass (Sass) Question

SASS: adding extend in mixin

I have three sass files (with all necessary imports):

  • header

  • variables

  • sprites

in variables i have:

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

in header i'm calling:

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

and in sprites:

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

but i got errors:

Error: Invalid CSS after " @extend": expected selector, was ".{$sprite};"
on line ** of ****.scss
>> @extend .{$sprite};

what i do wrong?


The problem is that you forgot the # when interpolating within the mixin

The lines of code should look like this

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