css - Replace a variable and scope the result with sass -

this question has answer here:

• define variables in sass based on classes 1 answer

i trying find smart solution sass replacing brand color variable , scoping result each component have.

for example .scss have

$value-to-replace: #000000; $brand-color-1:    #007be4; $brand-color-2:    #e1a22e;  .btn {   margin: 0;   padding: 10px;   background-color: $value-to-replace; } 

and compiled .css trying generate

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

in order write .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> 

what trying achieve allow me use variable $value-to-replace in of components. without necessity of writing mixin each component.

any ideas? help!

you can use sass lists (and nth function) , @while loop:

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

for each color in list, you'll create new class value. sass lists not zero-based.

this won't solve problem of having single variable use, though. solves problem of multiple mixins.

edit: jsbin of code