title: Is it possible to append CSS transform properties using Sass?
body: <p>In this contrived example I have an object to which I am applying a transform. I'd like to be able to add another transform to it by adding another class.</p>
  
  <pre><code>.translated{
    @include transform(translateX(50%));
    // This line will write all the vendor prefixed transform properies
    // e.g. -webkit-transform: translateX(50%);
    &amp;.rotated{
      @include transform(rotate(10deg));
      // e.g. -webkit-transform: rotate(10deg);
    }
  }
  </code></pre>
  
  <p>Now, what happens at the moment is that an element with classes translated and rotated just ends up being rotated, as the rotate transform overrides the previous translate transform.</p>
  
  <p>What I'd like to achieve is for the final CSS to look like:</p>
  
  <pre><code>-webkit-transform: translateX(50%) rotate(10deg);
  </code></pre>
  
  <p>Is there a way I can accomplish this using sass (maybe through the use of variables, or via a mixin)?</p>