title: Compass/Sass function & mixin syntax
body: <p>I'm currently writing my first mixin for Compass/Sass. After a short battle, I've got it to generate the exact CSS I need; hence my question isn't about fixing the output, but more about cleaning up the way I've done it.</p>
  
  <p>Here are two snippets of the code I'm using. The complete code generates a <code>background-image:</code> CSS rule with any number of comma-separated linear gradients, with <code>-webkit</code>, <code>moz</code>, and unprefixed gradient declarations in the latest W3C format (using <code>to top</code> rather than <code>bottom</code>, for example). </p>
  
  <p>As I said, I'm happy with the API and the output. I just want to clean up this code. </p>
  
  <p>Firstly, in the <code>w3c</code> conditional block below, how can I avoid what I want:</p>
  
  <pre><code>@return linear-gradient($direction, $color-stops);
  </code></pre>
  
  <p>... invoking the built-in Compass <code>linear-gradient</code> mixin? (I am including all the CSS3 Compass helpers in my project). All I want is to output a string, interpolating in the values of <code>$direction</code> and <code>$color-stops</code> inside the parentheses:</p>
  
  <pre><code>@function -gradient-rule($type, $direction, $color-stops) {
      @if $type == ('moz') {
          @return -moz-linear-gradient($direction, $color-stops);
      }
      @if $type == ('webkit') {
          @return -webkit-linear-gradient($direction, $color-stops);
      }
      @if $type == ('w3c') {
  
          // Terrible, terrible hack. Just couldn't work out how to write this without invoking the built-in Compass linear-gradient() function
          $prefix: linear-gradient;
          @return #{$prefix}unquote("(")#{$direction}, #{$color-stops}unquote(")");
      }
  }
  </code></pre>
  
  <p>Secondly, is there a cleaner way of writing the code below? I want to loop all the <code>$gradients</code>, and for each <code>$gradient</code>, assume the first item is a direction declaration, and the rest are colour stops. So the first item should be set in the variable <code>$to-direction</code>, and the rest set in a comma-list named <code>$color-stops</code>. How can I do this better, i.e. without needing the <code>$i</code> counter?</p>
  
  <pre><code>@each $gradient in $gradients {
  
      $i: 1;
      $to-direction: nth($gradient, 1);
      $color-stops: comma-list();
  
      @each $prop in $gradient {
          @if $i &gt; 1 {
              $color-stops: append($color-stops, $prop);
          }
          $i: $i+1;
      }
  
      // old syntax is the origin of the gradient, not the destination
      $from-direction: -from-direction($to-direction);
      $moz-value: append($moz-value, -gradient-rule('moz', $from-direction, $color-stops));
      $webkit-value: append($webkit-value, -gradient-rule('webkit', $from-direction, $color-stops));
  
      // new syntax is the destination
      $w3c-value: append($w3c-value, -gradient-rule('w3c', $to-direction, $color-stops));
  
      ...
      (continues)
  }
  </code></pre>
  
  <p>Many thanks for any help you can give!</p>