Generated by SassMeister.com.

box-input.scss

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

@mixin transition($transition-property, $transition-time, $method, $delay: 0s) {
    -webkit-transition: $transition-property $transition-time $method $delay;
       -moz-transition: $transition-property $transition-time $method $delay;
        -ms-transition: $transition-property $transition-time $method $delay;
         -o-transition: $transition-property $transition-time $method $delay;
            transition: $transition-property $transition-time $method $delay;
}

$c-red: red;
$c-blue: blue;
$c-red-light: lighten($c-blue, 20%); 

.box{
    width: 200px;
    height: 200px;
    background-color: $c-red;
    @include transition(background-color, 0.5s, ease-in-out);
    &:hover{
        background-color: $c-red-light;
    }
}

box-output.css

.box {
  width: 200px;
  height: 200px;
  background-color: red;
  -webkit-transition: background-color 0.5s ease-in-out 0s;
  -moz-transition: background-color 0.5s ease-in-out 0s;
  -ms-transition: background-color 0.5s ease-in-out 0s;
  -o-transition: background-color 0.5s ease-in-out 0s;
  transition: background-color 0.5s ease-in-out 0s;
}
.box:hover {
  background-color: #6666ff;
}

box-rendered.html

<div class="box"></div>

Boxes.html

<div class="box"></div>