Cacher is the code snippet organizer for pro developers

<div class="test">test me</div>

.test {
  transition: color, background, width;
  transition-duration: 0.2s;
  transition-function: linear;
  background: red;
  height: 200px;
  width: 200px;
  color: white; }
  .test:hover {
    background: purple;
    color: black;
    width: 400px; }

// ----
// libsass (v3.2.5)
// ----

@mixin transition($property...) {
  $transition-duration: .2s;
  $transition-function: linear;
  transition: $property;
  transition-duration: $transition-duration;
  transition-function: $transition-function;
}

.test {
  @include transition(color, background, width);
  background: red;
  height: 200px;
  width: 200px;
  color: white;
  &:hover {
    background: purple;
    color: black;
    width: 400px;
  }
}

<div class="test">test me</div>