Переопределить переменную SASS внутри селектора

Question

Я пытаюсь переопределить значение переменной, когда тело имеет на нем определенный класс. Я надеюсь, что смогу перейти на разные «темы», основанные на этом классе, которые я добавляю к телу.

переменная по умолчанию для моего основного цвета

$primary: #6cc907; 

Override первичная переменная

.branded { 
    $primary: #e43e94; 
} 

Answer 1

Рассмотрите возможность использования mixin вместо переменной для этого приложения. В вашем селекторе вы можете включить mixin и передать ему переменную. Вы даже можете установить значение по умолчанию для переменной mixin, в этом случае ваша база background-color. Переверните его, передав mixin новое значение.

Sass

@mixin bg-color($primary: #6cc907) { 
    background-color: $primary; 
} 

div { 
    @include bg-color(); // Use default value 

    display: inline-block; 
    height: 300px; 
    width: 200px; 

    &.branded { 
    @include bg-color(#e43e94); // Override value 
    } 
} 

Codepen example