Automatic Transition Wrapper
Stop writing transition: all 0.3s ease-in-out on every hover. Use a mixin that defaults to your brand's specific timing and easing curves.
SCSS
$standard-ease: cubic-bezier(0.4, 0, 0.2, 1);
$fast: 150ms;
@mixin transition($props...) {
$result: ();
@each $prop in $props {
$result: append($result, $prop $fast $standard-ease, comma);
}
transition: $result;
}
.link { @include transition(color, transform); }