• Теория
  • Теория

Цветовые функции, шаг 3

Ещё две Less-функции для работы с цветом: saturate и desaturate. Они увеличивают и уменьшают насыщенность заданного цвета. Их синтаксис такой же как и у lighten/darken:

color: saturate(green, 20%); // green насыщеннее на 20%
color: desaturate(blue, 50%); // blue бледнее на 50%

Функцию desaturate мы используем для создания стиля «отключённой» кнопки. Совместно с desaturate воспользуемся lighten, чтобы сделать кнопку бледной и светлой. Одновременно функции цвета можно использовать так:

// цвет светлее красного на 50% и насыщеннее на 20%
color: saturate(lighten(red, 50%), 20%);

// цвет темнее синего на 20% и бледнее на 50%
color: desaturate(darken(blue, 20%), 50%);

То есть функции можно «вкладывать» друг в друга, используя их в качестве аргументов.

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Знакомство с Less» тренажёра «Инструменты автоматизации: препроцессор» можно после регистрации и оформления подписки.