Обе функције lightenи darkenфункције манипулишу светлошћу боје у ХСЛ простору додавањем или одузимањем светлости. У основи, они су само псеудоними за $lightnessпараметар adjust-colorфункције.
Ствар је у томе што те функције често не дају очекивани резултат. С друге стране, mixфункција је леп начин да осветлите или затамните боју мешајући је са белом или црном.
Корист од употребе mix, а не једна од две поменуте функције је да ће постепено ићи на црно (или бело), као смањите проценат боје, док darkenи lightenбрзо угасити боју скроз у црно или бело.
Да бисте избегли писање функције микин сваки пут, што не само да одузима време већ и није сасвим експлицитно, лако можете створити две функције tintи shade(које су такође део Цомпасс-а):
/// 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); )Употреба
.foo ( color: tint(#BADA55, 42%); ) .bar ( background-color: shade(#663399, 42%); ).foo ( color: #e2efb7; ) .bar ( background-color: #2a1540; )