SCSS - Extend class dynamically

Question

In Vue i have similar to

:style="{
            [`--chip-bg-hover`]: hoverColorValue,
            [`--chip-bg-active`]: activeColor,
            [`--chip-border-hover`]: borderHoverColorValue,
        }"

Then in SCSS

.chip:hover {
    box-shadow: 0 10px 20px 0 #00000026;
    @extend --chip-bg-active;
}

The problem is obvius. Can´t extend from to --chip-bg-active variable. Is a string also, but doesn't work right. So, anybody know the right way to extend a class dynamically?

Answer 1

@extend is used to extend selectors to share the declarations, but --chip-bg-active is a CSS variable and is a value . Think of it like trying to do @extend #000 – this does not make sense. If you are trying to use the value of --chip-bg-active , you can use var() like this to get the value of the CSS variable:

.chip:hover {
    box-shadow: 0 10px 20px 0 #00000026;
    background-color: var(--chip-bg-active);
}

Answer 2

Maybe can do something like this.

.chip:hover {
        box-shadow: 0 10px 20px 0 #00000026;
        $background-color: var(--chip-bg-hover);
        $border-color: var(--chip-border-hover);
        @if $background-color == 'defaultMarker-hover' {
            @extend .bg-defaultMarker-hover;
        } @else if $background-color == 'color1Marker-hover' {
            @extend .bg-color1Marker-hover;
        } @else if $background-color == 'color2Marker-hover' {
            @extend .bg-color2Marker-hover;
        } @else if $background-color == 'color3Marker-hover' {
            @extend .bg-color3Marker-hover;
        } @else if $background-color == 'color5Marker-hover' {
            @extend .bg-color5Marker-hover;
        } @else if $background-color == 'color4Marker-hover' {
            @extend .bg-color4Marker-hover;
        } @else if $background-color == 'color6Marker-hover' {
            @extend .bg-color5Marker-hover;
        } @else if $background-color == 'color7Marker-hover' {
            @extend .bg-color6Marker-hover;
        } @else if $background-color == 'color8Marker-hover' {
            @extend .bg-color7Marker-hover;
        } @else if $background-color == 'color9Marker-hover' {
            @extend .bg-color8Marker-hover;
        }