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

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

· CSS, SASS и Снипеты · 1 мин чтения

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 (прозрачный)«.

Комментарии