Mindkettő lightenés a darkenfunkciók manipulálják a HSL-tér színének világosságát azzal, hogy hozzáadják vagy kivonják a világosságot. Alapvetően ezek nem más, mint $lightnessa adjust-colorfüggvény paraméterének álnevei .
A helyzet az, hogy ezek a funkciók gyakran nem biztosítják a várt eredményt. Másrészről, ez a mixfunkció jó módja annak, hogy a színt világosabbá vagy sötétebbé tegye fehér vagy fekete színű keverékkel.
Az előnye a mixhelyett a két fent említett funkciók, hogy fokozatosan megy a fekete (vagy fehér), ahogy csökken az aránya a szín, mivel darkenés lightengyorsan fújja ki a színt egészen a fekete vagy fehér.
Annak elkerülése érdekében, hogy a mixin függvény minden alkalommal megírjon, ami nemcsak időigényes, de nem is kifejezett, könnyen létrehozhat két függvényt tint, shadeamelyek (amelyek szintén előfordulnak az Iránytű részei):
/// 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); )Használat
.foo ( color: tint(#BADA55, 42%); ) .bar ( background-color: shade(#663399, 42%); ).foo ( color: #e2efb7; ) .bar ( background-color: #2a1540; )