Функции оттенка и тени онлайн урок.


Функцииlightenиdarkenуправляют легкостью цвета в пространстве HSL путем добавления или вычитания на него легкости. По сути, это ничего, кроме псевдонимов для параметра$ lightnessфункциинастройки цвета.

Дело в том, что эти функции часто не обеспечивают ожидаемого результата. С другой стороны, функцияmix- отличный способ уменьшить или затемнить цвет, смешав его с белым или черным.

Преимущество использованияmix, а не одной из двух вышеупомянутых функций, состоит в том, что он постепенно переходит в черный (или белый), когда вы уменьшаете пропорцию цвета, тогда какdarkenиlightenбыстро выдуваются цвет полностью черный или белый.

Чтобы не записывать функцию mixin каждый раз, что не только требует много времени, но и не совсем явственно, вы можете легко создать две функцииtintиshade(которые также входят в состав Compass ):

/// 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;
}