Tint- und Shade-Funktionen

Sowohl die Funktionen lighten als auch darken manipulieren die Helligkeit einer Farbe im HSL-Raum, indem sie ihr Helligkeit hinzufügen oder davon subtrahieren. Grundsätzlich sind sie nichts anderes als Aliase für den Parameter $lightness der Funktion adjust-color.

Der Punkt ist, dass diese Funktionen oft nicht das erwartete Ergebnis liefern. Andererseits ist die Funktion mix eine gute Möglichkeit, eine Farbe aufzuhellen oder abzudunkeln, indem man sie mit Weiß oder Schwarz mischt.

Der Vorteil der Verwendung von mix anstelle einer der beiden oben genannten Funktionen ist, dass sie sich bei Verringerung des Anteils der Farbe schrittweise Schwarz (oder Weiß) annähert, während darken und lighten eine Farbe schnell bis zum völligen Schwarz oder Weiß ausblenden.

Um die Mixin-Funktion jedes Mal neu schreiben zu müssen, was nicht nur zeitaufwendig, sondern auch nicht ganz eindeutig ist, können Sie einfach zwei Funktionen tint und shade erstellen (die zufällig auch Teil von Compass sind).

/// Slightly lighten a color
/// @access public
/// @param {Color} $color - color to tint
/// @param {Number} $percentage - percentage of `$color` in returned color
/// @return {Color}
@function tint($color, $percentage) {
  @return mix(white, $color, $percentage);
}

/// Slightly darken a color
/// @access public
/// @param {Color} $color - color to shade
/// @param {Number} $percentage - percentage of `$color` in returned color
/// @return {Color}
@function shade($color, $percentage) {
  @return mix(black, $color, $percentage);
}

Verwendung

.foo {
  color: tint(#BADA55, 42%);
}

.bar {
  background-color: shade(#663399, 42%);
}

.foo {
  color: #e2efb7;
}

.bar {
  background-color: #2a1540;
}