CSS var в rgba или удобное использование цветов в Sass

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

Задача:

Быстрое изменение палитры цветов и их прозрачность(именно CSS var) для всего сайта , используя только HEX формат.

Решение:

Создание массива с нужными цветами. Далее, автоматическое создание переменных. И написание функции, которая изменяет прозрачность у CSS var.

В итоге, такая запись:

Будет эквивалентна такой (можно посмотреть живой пример на codepen):

Но, при этом в управлении вы используете только HEX формат цвета. Конвертация происходит в автоматическом режиме. Никаких танцев с бубном. Смотрим:

Автоматическое создание CSS переменных

Почему лучше использовать CSS, а не Sass переменные, можно почитать на Хабре в этой статье.

Первое, создадим массив с нужными цветами.

Далее, создадим CSS переменные, перебрав в цикле созданный выше массив $colors и запишем их в псевдокласс :root.

На выходе, получим  это:

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

Для использования прозрачности в Sass необходимо использовать цвет в RGB формате, но у нас только HEX. Чтобы это исправить, напишем простую функцию:

Далее, запишем цвет в переменную:

И воспользуемся функцией rgba, где первый параметр — нужный цвет, а второй — прозрачность. Значение прозрачности может находиться в диапазоне от 0 (полностью прозрачный) до 1 (полностью непрозрачный):

Сокращенная запись CSS переменной

Для ускоренного написания CSS переменной, напишем функцию cl (сокращение от слова color).

Теперь запись:

Равнозначна такой:

Sass Простая магия

Теперь покажу пример, как используя 3 этих подхода, можно управлять цветами (CSS переменными) так, используя массив как тему (потрогать на codepen):

Вот полный код

 

Ну вот и все, в качестве вывода можно сказать, что благодаря подобным функциям упрощается и ускоряется работа с цветами.

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

Возможно вам будет интересно прочитать — Топ 5 причин, почему мне нравятся пользовательские свойства CSS.

источник