Demo-Transition

@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;
    }
}