0

I am trying to find a smart solution with sass for replacing a brand color variable and scoping the result for each component I have.

For example this is the .scss I have

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

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

And this is the compiled .css I am trying to generate

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

In order to write this .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 I am trying to achieve is something that would allow me to use the variable $value-to-replace in all of my components. Without the necessity of writing a mixin for each component.

Any ideas? Thanks for the help!

Pazvani
  • 11
  • 2
  • Alternate duplicate: http://stackoverflow.com/questions/21882528/unexpected-results-when-using-extend-for-themes – cimmanon Jul 07 '15 at 18:38

1 Answers1

0

You can use Sass Lists (and the nth function) and a @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 the list, you'll create a new class for that value. Sass lists are not zero-based.

This won't solve the problem of having a single variable to use, though. It just solves the problem of multiple mixins.

Edit: JSBin of code