SASS Duplicating/Renaming a class containing map

Question

I have an existing SASS map that looks like this:

@each $color, $value in $theme-colors {
  .old-name-#{$color} {
      color: $value;
  }
}

I want to keep .old-name in my CSS but create a new alias with new naming. For other areas I'm just using:

.new-name { 
  @extend .old-name;
}

How does it work in the syntax when you want to extend a class with a map? Is something like this possible?

.new-name-#($color) { 
  @extend .old-name-#($color);
}

score 0 · Answer 1 · answered Feb 24 '23 at 15:09

Yes, it is perfectly possible to extends the selectors you created using maps.

@each $color, $value in $theme-colors {
  .old-name-#{$color} {
    color: $value;
  }
}

@each $color, $value in $theme-colors {
  .new-name-#{$color} {
    @extend .old-name-#{$color};
  }
}

SASS Duplicating/Renaming a class containing map

1 Answers1