title: Replace Variable Inside @content Directive in SASS Mixin
body: <p>I'm trying to figure out a DRY and readable way to loop through color classes for each of my design patterns. A nice way I thought I could do this is to pass the CSS properties that need to be changed for each pattern to a mixin along with a variable, and the mixin would swap out the variable inside the <code>@content</code> declaration:</p>
  
  <pre><code>$color-list: (
      "c1" : #ed0ead, 
      "c2" : #12bc21,
      "c3" : #2666cc
  );
  
  @mixin color-variants {
      @each $class, $color in $color-list {
          &amp;.#{$class} {
              @content;
          }
      }
  }
  
  .my-module {
      padding: 1rem;
      background-color: #fff;
      border-top-size: 5px;
      border-top-style: solid;
      @include color-variants {
          border-top-color: $color;
      }
  }
  
  .another-module {
      padding: 1rem;
      border-radius: 5px;
      border-size: 2px;
      border-style: solid;
      @include color-variants {
          background-color: rgba($color, 0.5);
          &amp;:hover {
            color: $color;
          }
      }
  }
  </code></pre>
  
  <p>Unfortunately SASS doesn't parse the <code>@content</code> declaration along with the mixin variables, so I get a <code>Undefined variable: "$color"</code> error.</p>
  
  <p>Is it possible to do something like this with existing SASS tools?</p>