Sass цвета: используем функции помощники

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

Предисловие

Как основной цвет, я возьму красный:

$primary-color: red;

Темнее или светлее

Для затемнения или осветления цвета, вы можете воспользоваться такими функциями как  darken() или lighten().

Пример использования:

• darken($primary-color, 10%) — затемнение
• lighten($primary-color, 10%) — осветление

Каждая из этих функций принимает два параметра, первый — это цвет, второй это % осветления или затемнения.

Демо:

21516

Насыщенность и обесцвечивание

Используя функции saturate() и desaturate(), вы можете установить уровень яркости цвета.

• saturate($primary-color, 10%) — добавляет насыщенность
• desaturate($primary-color, 10%) — работает в обратную сторону — обесцвечивает

Демо:

21516

Оттенок HSL

С помощью функции adjust-hue() можно менять оттенок HSL (H — Оттенок, S — Насыщенность, L — Легкость).

Демо:

21516

Прозрачность цвета с mixin

Я подробно описывал как сделать прозрачность в «Sass mixin для конвертации цвета из HEX в RGBa (прозрачный)«.