Заменить переменную и область результата с помощью sass

Question

Я пытаюсь найти интеллектуальное решение с sass для замены цветовой переменной бренда и определения результата для каждого компонента, который у меня есть.

Например, это .scss меня

$value-to-replace: #000000; 
$brand-color-1: #007be4; 
$brand-color-2: #e1a22e; 

.btn { 
    margin: 0; 
    padding: 10px; 
    background-color: $value-to-replace; 
} 

И это скомпилированный .css Я пытаюсь создать

.btn { 
    margin: 0; 
    padding: 10px; 
} 
.brand-color-1 > .btn{ 
    background-color: #007be4; 
} 
.brand-color-2 > .btn{ 
    background-color: #e1a22e; 
} 

Для того, чтобы написать эту .html

<main class="brand-color-1"> 
    <a class="btn" href="#">Button Text</a> 
</main> 

<main class="brand-color-2"> 
    <a class="btn" href="#">Button Text</a> 
</main> 

То, что я пытаюсь достичь, g, что позволило бы мне использовать переменную $value-to-replace во всех моих компонентах. Без необходимости писать mixin для каждого компонента.

Любые идеи? Спасибо за помощь!

Answer 1

Вы можете использовать Sass списки (и nth function) и цикл @while:

$colors: (#007be4, #e1a22e); 

.btn { 
    margin: 0; 
    padding: 10px; 
} 

$index: 1; 

@while $index < 3 
{ 
    .brand-color-#{$index} > .btn { 
    background-color: nth($colors, $index); 
    } 
    $index: $index + 1; 
} 

Для каждого цвета в списке, вы будете создавать новый класс для этого значения. Списки Sass не основаны на нуле.

Это не решит проблему использования одной переменной. Это просто решает проблему нескольких миксинов.

Edit:JSBin of code