Sass Mixin: Callback or Replace @content
<p>I don't know if Sass is able to do this, but it doesn't hurt to ask.</p>

<p><strong>The Problem</strong></p>

<p>Basically I have three colors pattern that are repeated in multiple sections of application, like <code>blue</code>, <code>green</code> and <code>orange</code>. Sometimes what changes is the <code>background-color</code>, or the <code>border-color</code> of the component...  Sometimes is the text <code>color</code> of a child element, etc.</p>

<p><strong>What I thought?</strong></p>

<p><strong>1.</strong> Replace a string pattern inside a content.</p>

<pre class="lang-scss prettyprint-override"><code>.my-class {
  @include colorize {
    background-color: _COLOR_;

    .button {
      border-color: _COLOR_;
      color: _COLOR_;
    }
  }
}
</code></pre>

<p><strong>2.</strong> Providing a callback variable for <code>@content</code>.</p>

<pre class="lang-scss prettyprint-override"><code>// This is just a concept, IT DOESN'T WORK.
@mixin colorize {
  $colors: blue, green, orange;

  @each $colors in $color {
    // ...
    @content($color); // &lt;-- The Magic?!
    // ...
  }  
}

// Usage
@include colorize {
  background-color: $color;
}
</code></pre>

<blockquote>
  <p>I tried to implement such solutions, but without success.</p>
</blockquote>

<p>Instead of it...</p>

<p><strong>See below my <em>workaround</em> to get it partially working:</strong></p>

<pre class="lang-scss prettyprint-override"><code>@mixin colorize($properties) {
  $colors: blue, green, orange;

  @for $index from 1 through length($colors) {
    &amp;:nth-child(#{length($colors)}n+#{$index}) {
      @each $property in $properties {
        #{$property}: #{nth($colors, $index)};
      }
    }
  }
}
</code></pre>

<p>You can use this <em>mixin</em> that way:</p>

<pre class="lang-scss prettyprint-override"><code>.some-class {
  @include colorize(background-color);
}
</code></pre>

<p>What will come output:</p>

<pre class="lang-css prettyprint-override"><code>.some-class:nth-child(3n+1) {
  background-color: blue;
}


.some-class:nth-child(3n+2) {
  background-color: green;
}


.some-class:nth-child(3n+3) {
  background-color: orange;
}
</code></pre>

<blockquote>
  <p>The problem? Well, I can't use it with child selectors.</p>
</blockquote>

<hr>

<p>Based on the above information, there is some magic solution for this case?</p>