brabertaser19 brabertaser19 - 21 days ago 5
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?

Answer

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