Less — Урок 15. Встроенные функции

1.09.2019 Нет комментариев 1 052

Привет! Среди встроенных функций Less, чаще всего используются функции управления цветом, их и рассмотрим в последнем уроке Less.

Данные функции обычно принимают параметры в тех же единицах, что и изменяемые ими значения, а проценты обрабатываются как абсолютные значения, которые привязаны к своим допустимым диапазонам.

Color Operation Functions:

saturate

Позволяет увеличить насыщенность цвета в цветовом пространстве HSL на абсолютную величину.

Параметры:

  • color: цветной объект
  • amount: процент 0-100%.
  • method: необязательно, установите relative для регулировки относительно текущего значения.

Пример: saturate(hsl(186, 60%, 46%), 50%)

Результат: #00d3eb // hsl(186, 100%, 46%)

Посмотрим, что получилось: левый круг с базовым цветом, а правый с увеличенной насыщенностью.

Заметим, что исходная насыщенность равна 60% и при её увеличении на 50% получаем 100%, т.е. итоговое значение находится в допустимых пределах.

desaturate

Уменьшает насыщенность цвета в цветовом пространстве HSL на абсолютную величину.

Параметры:

  • color: цветной объект.
  • amount: процент 0-100%.
  • method: необязательно, установите relative для регулировки относительно текущего значения.

Пример: deaturate(hsl(128, 68%, 58%), 30%)

Выход: #6bbd76 // hsl(186, 38%, 58%)

Рабочий пример:

lighten

Увеличивает яркость цвета в цветовом пространстве HSL на абсолютную величину.

Параметры:

  • color: Цветной объект.
  • amount: Процент 0-100%.
  • method: Необязательно, установите relative для регулировки относительно текущего значения.

Пример: lighten(hsl(58, 97%, 49%), 30%)

Выход: #fdfa96 // hsl(58, 97%, 79%)

Результат:

darken

Уменьшает яркость цвета в цветовом пространстве HSL на абсолютную величину.

Параметры:

  • color: Цветной объект.
  • amount: Процент 0-100%.
  • method: Необязательно, установите relative для регулировки относительно текущего значения.

Пример: darken(hsl(305, 46%, 72%), 30%)

Выход: #9c3a94 // hsl(305, 46%, 42%)

Рабочий пример:

fadein

Уменьшает прозрачность (или увеличивает непрозрачность) цвета.

Параметры:

  • color: Цветной объект.
  • amount: Процент 0-100%.
  • method: Необязательно, установите relative для регулировки относительно текущего значения.

Пример: fadein(hsla(305, 46%, 42%, 0.2), 100%);

Выход: #9c3a94 // hsl(305, 46%, 42%)

Смотрим пример на hover-эффекте. Я добавила свойство transition для плавной смены цвета:

Еще раз замечу, насколько удобно использование переменных! При необходимости, достаточно поменять значение лишь одной переменной с базовым цветом, а не везде, как в CSS. Наслаждаемся 🙂

fadeout

Увеличит прозрачность (или уменьшит непрозрачность) цвета, сделав его менее прозрачным. Чтобы получить эффект исчезновения в другом направлении, используйте fadein.

Параметры:

  • color: Цветной объект.
  • amount: Процент 0-100%.
  • method: Необязательно, установите relative для регулировки относительно текущего значения.

Пример: fadeout(hsla(305, 46%, 42%, 0.9), 80%)

Выход: rgba(156, 58, 148, 0.1) // hsla(305, 46%, 42%, 0.1)

fade

Установит абсолютную непрозрачность цвета. Может применяться к цветам независимо от того, имеют ли они значение непрозрачности или нет.

Параметры:

  • color: Цветной объект.
  • amount: Процент 0-100%.

Пример: fade(hsl(186, 100%, 46%), 10%) // задали цвет без прозрачности

Выход: rgba(0, 211, 235, 0.1); //hsla(186, 100%, 46%, 0.1 )

spin

Поверните угол оттенка цвета в любом направлении.

В то время как диапазон углов находится в пределах от 0 до 360, вы можете передавать гораздо большие (даже отрицательные) значения, и они будут меняться. Например, углы 360 и 720 приведут к тому же результату. 

Обратите внимание, что цвета передаются через преобразование RGB, которое не сохраняет значение оттенка для серых (потому что значение оттенка не имеет смысла, когда нет насыщенности), поэтому убедитесь, что вы применяете функции таким образом, чтобы сохранить оттенок, например, не следует делать это:

@c: saturate(spin(#aaaaaa, 10), 10%);

Вот так будет правильно:

@c: spin(saturate(#aaaaaa, 10%), 10);

Цвета всегда возвращаются как значения RGB, поэтому применение spin к значению серого ничего не изменит.

Параметры:

  • color: Цветной объект.
  • angle: Количество градусов для поворота (+ или -).

Пример: 

spin(hsl(186, 100%, 46%), 70)
spin(hsl(186, 100%, 46%), -70)

На выходе:

hsl(256, 100%, 46%)
hsl(116, 100%, 46%)

Смотрим пример в работе на hover-эффекте:

mix

Смешайте два цвета вместе в разной пропорции. Непрозрачность включена в расчеты.

Параметры:

  • color1: Цветной объект.
  • color2: Цветной объект.
  • weight: Необязательно, процентная точка баланса между двумя цветами, по умолчанию 50%.

Пример:

mix(#00d3ebe6, #75eb0080, 60%);
mix(rgba(0, 211, 235, 0.9), rgba(117, 235, 0, 0.5), 60%);

Выход:

#1ad8b7bd
rgba(26, 216, 183, 0.74)

Посмотрим, что получилось на картинке в результате смешивания цветов:

tint

Смешайте цвет с белым в переменной пропорции. Аналогично записи:mix(#ffffff, @color, @weight)

Параметры:

  • color: Цветной объект.
  • weight: Необязательно, процентный баланс между цветом и белым, по умолчанию 50%.

Пример:

no-alpha: tint(#3db402, 40%);
with-alpha: tint(rgba(61,180,2, 0.5), 40%);

shade

Смешайте цвет с черным в переменной пропорции. Аналогично записи: mix(#000000, @color, @weight)

Параметры:

  • color: Цветной объект.
  • weight: Необязательно, процентный баланс между цветом и черным по умолчанию составляет 50%.

Пример:

no-alpha: shade(#3db402, 40%);
with-alpha: shade(rgba(61,180,2, 0.5), 40%);

Результат смешения с черным цветом в пропорции 40%:

greyscale

Удалите всю насыщенность цвета в цветовом пространстве HSL. Аналогично вызову desaturate(@color, 100%).

Параметры:

color:Цветной объект.

@color: hsl(100, 98%, 36%);
@greyscale: greyscale(@color, 100%);

Выход: #5c5c5c // hsl(0, 0%, 36%)

Смотрим результат:

contrast

Выберите, какой из двух цветов обеспечивает наибольшую контрастность с другим.

Это полезно для обеспечения читабельности текста на определенном фоне. Параметры света и темноты могут быть предоставлены в любом порядке — функция рассчитает их значения яркости и автоматически назначит свет и темноту, что означает, вы не можете использовать эту функцию для выбора наименее контрастного цвета путем изменения порядка.

Параметры:

  • color: Цветной объект для сравнения.
  • dark: опционально-обозначенный темный цвет (по умолчанию черный).
  • light: опционально — обозначенный светлый цвет (по умолчанию белый).
  • threshold: необязательно — процент 0-100%, указывающий, где происходит переход от «темного» к «светлому» (по умолчанию 43%, соответствует SASS). Это используется для смещения контраста тем или иным способом, например, чтобы вы могли решить, должен ли 50% серый фон приводить к черному или белому тексту. Обычно вы устанавливаете это значение для «светлых» палитр, выше для «темных».

Пример:

@a: contrast(#bbbbbb);
@b: contrast(#222222, #101010); 
@c: contrast(#222222, #101010, #dddddd); 
@d: contrast(hsl(90, 100%, 50%), #000000, #ffffff, 30%); 
@e: contrast(hsl(90, 100%, 50%), #000000, #ffffff, 80%);

Посмотрим сразу результат в действии:

Итак, мы рассмотрели встроенные функции Less для работы с цветом.

Этим уроком завершаю серию статей по Less. В дальнейшем буду публиковать другие материалы, связанные с задачами по данному препроцессору.

Данный материал был написан с помощью официальной документации Less.

Вот таким ударным трудом встретила первое сентября, День знаний 🙂

Голосов: 0, Средняя оценка: 0
Top