title: Pass variable to sass mixin to contain multiple properties
body: <p>I have a sass mixin for box-shadow which looks like this: </p>
  
  <pre><code>@mixin box-shadow($hLength, $vLength, $blur, $spread, $colour, $type:""){
       @if $type != "" {
          -webkit-box-shadow:$type $hLength $vLength $blur $spread $colour;
          -moz-box-shadow:$type $hLength $vLength $blur $spread $colour;
          box-shadow:$type $hLength $vLength $blur $spread $colour;
      }
  }
  </code></pre>
  
  <p>This has worked fine for most of my application. </p>
  
  <p>However I now need to modify my method somehow. </p>
  
  <p>I have list items which can have one of 11 classes, this class controls the colour and icon of the list item. </p>
  
  <p>Examples of my variables: </p>
  
  <pre><code>$channel1:     #19BC9C;
  $channel2:     #F1C40E;
  $channel3:     #9B59B6;
  $channel4:     #3398DB;
  </code></pre>
  
  <p>And my sass for the list items looks like this: </p>
  
  <pre><code>li {
  
     &amp;.channel1 {
        @include box-shadow(-3px, 0px, 0px, 0px, $channel1, inset);
     }
  
     &amp;.channel2 {
        @include box-shadow(-3px, 0px, 0px, 0px, $channel2, inset);
     }
  }
  </code></pre>
  
  <p>The problem is that the px values and inset are the same for each class element. However there is no property for box-shadow-color, so I cannot split the parameters up. </p>
  
  <p>I was hoping I could store -3px, 0px, 0px, 0px in a separate variable and pass that in. </p>
  
  <p><code>@include box-shadow($channelBorder, $channel1, inset);</code> etc, but this does not work. </p>
  
  <p>Does anyone know if there is a decent solution, I would rather keep my mixin as it is, as much as possible. </p>