color swap

view source

A shorthand for setting two color-states, — active (hover/focus) and inactive — involving text color and background-color, with the option of adding a transition.

use-name

scut-color-swap

type

mixin-only

arguments

$off
Color(s) for the "off" state. A list of two values will designate color and background-color (in order). One value will be interpreted as color — unless the $bg argument, below, is set to true, in which case it will be background-color.
$on
Color(s) for the "on" state (:hover and :focus). One or two values, interpreted the same way as $off, above.
$duration

default

0

The transition-duration between $off and $on states.
$bg

default

false

Set to true if you want to pass a single color value for the $off and $on arguments and you want that value interpreted as background-color. (By default, a single value will be intepreted as color.)

The examples should clarify the somewhat tricky arguments ...

example

SCSS

.eg-color-swap-1 {
  background: #fff;
  // only text `color` changes, with a transition
  @include scut-color-swap($eg-dark, $eg-light, 1s);
}
.eg-color-swap-2 {
  // both text `color` and `background-color` change,
  // with no transition
  @include scut-color-swap($eg-light $eg-dark, $eg-dark $eg-light);
}
.eg-color-swap-3 {
  color: #fff;
  // only `background-color` changes, with a transition
  @include scut-color-swap($eg-dark, $eg-light, 0.5s, true);
}

compiled CSS

.eg-color-swap-1 {
  background: #fff;
  color: #002834;
  transition-property: color;
  transition-duration: 1s;
}
.eg-color-swap-1:hover, .eg-color-swap-1:focus {
  color: #9AE9FF;
}

.eg-color-swap-2 {
  color: #9AE9FF;
  background-color: #002834;
}
.eg-color-swap-2:hover, .eg-color-swap-2:focus {
  color: #002834;
  background-color: #9AE9FF;
}

.eg-color-swap-3 {
  color: #fff;
  background-color: #002834;
  transition-property: background-color;
  transition-duration: 0.5s;
}
.eg-color-swap-3:hover, .eg-color-swap-3:focus {
  background-color: #9AE9FF;
}

Result

Variation 1

Variation 2

Variation 3