Abi lightenir darkenfunkcijos manipuliuoja spalvos šviesumu HSL erdvėje, pridedant arba atimant jai lengvumą. Iš esmės, tai yra tik funkcijos $lightnessparametro slapyvardžiai adjust-color.
Reikalas tas, kad tos funkcijos dažnai neduoda laukiamo rezultato. Kita vertus, ši mixfunkcija yra puikus būdas apšviesti ar patamsinti spalvą, sumaišant ją su balta arba juoda.
Galimybė naudotis naudos mix, o ne vienas iš dviejų minėtų funkcijų yra ta, kad ji bus palaipsniui pereiti prie juodos (arba balta) kaip jums sumažinti spalvos dalį, o darkenir lightengreitai užpūsti spalvą visą kelią iki juodos arba baltos spalvos.
Norėdami išvengti „mixin“ funkcijos rašymo kiekvieną kartą, o tai ne tik užima daug laiko, bet ir nėra gana aišku, galite lengvai sukurti dvi funkcijas tintir shade(kurios taip pat būna „Compass“ dalis):
/// 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); )Naudojimas
.foo ( color: tint(#BADA55, 42%); ) .bar ( background-color: shade(#663399, 42%); ).foo ( color: #e2efb7; ) .bar ( background-color: #2a1540; )