Molemmat toiminnot lightenja darkentoiminnot manipuloivat värin vaaleutta HSL-tilassa lisäämällä tai vähentämällä siihen vaaleutta. Pohjimmiltaan ne ovat vain aliaksia funktion $lightnessparametrille adjust-color.
Asia on, että nämä toiminnot eivät usein tarjoa odotettua tulosta. Toisaalta mixtoiminto on mukava tapa vaalentaa tai tummentaa väriä sekoittamalla sitä joko valkoisen tai mustan kanssa.
Etuna mixkahden yllä mainitun toiminnon käyttämisestä on se, että se siirtyy asteittain mustaksi (tai valkoiseksi), kun pienennät värin osuutta, kun taas darkenja lightenpuhaltaa värin nopeasti mustaksi tai valkoiseksi.
Jotta vältytään kirjoittamasta miksaustoimintoa joka kerta, mikä ei ole vain aikaa vievää, mutta myös epätarkkaa, voit helposti luoda kaksi toimintoa tintja shade(jotka satunnaisesti kuuluvat myös Kompassiin):
/// 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); )Käyttö
.foo ( color: tint(#BADA55, 42%); ) .bar ( background-color: shade(#663399, 42%); ).foo ( color: #e2efb7; ) .bar ( background-color: #2a1540; )
