title: Sass Dynamic Variable in Loop
body: <p>How to get <code>mixin argument</code> from <code>array variable</code> in a loop with <strong>Sass</strong>?
  Example code is below:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>$colors: red green blue;
      $red-foo: 100px;
      $red-bar: 110px;
      $red-baz: 120px;
      $green-foo: 100px;
      $green-bar: 110px;
      $green-baz: 120px;
      $blue-foo: 100px;
      $blue-bar: 110px;
      $blue-baz: 120px;
      
      @mixin item($color-foo, $color-bar, $color-baz){
          width: $color-foo,;
          height: $color-bar;
          ...
      }
      
      @each $color in $colors {
          .class-#{$color}{
              @include item($color#{-foo}, $color#{-bar}, $color#{-baz})
          }
      }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Desired output is below:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    .class-red{
          //variables
      }
      
      .class-green{
          //variables
      }
      
      .class-blue{
          //variables
      }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Also is there a way for shorthand of <code>$color-foo, $color-bar, $color-baz</code> like <code>@include item($color-shorthand)</code>? Maybe there could be a better solution for this.</p>