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

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

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

body{   color: color(primary);   background: color(primary, 0.5); }

Будет эквивалентна такой:

:root {   --color-pink: #E20071;   --color-pink--rgb: 226, 0, 113; }  body {   color: var(--color-pink);   background: rgba(var(--color-pink--rgb), 0.5); }

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

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

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

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

$colors : (   "pink"  : #E20071,   "blue"  : #00A3DA,   "gray"  : #939394,   "white" : #FFFFFF,   "black" : #1B1B1B, );

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

:root{   @each $key, $value in $colors {     --color-#{$key} : #{$value};   } }

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

:root {   --color-pink: #E20071;   --color-blue: #00A3DA;   --color-gray: #939394;   --color-white: #FFFFFF;   --color-black: #1B1B1B; }

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

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

@function HexToRGB($hex) {   @return red($hex), green($hex), blue($hex); }

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

:root {   --color-pink-rgb: #{HexToRGB(#E20071)}; }

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

body{   background: rgba(var(--color-pink-rgb), 0.5); } 

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

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

@function color($name) {   @return var(--color-#{unquote($name)}); }

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

body{   background: color(pink); }

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

body{   background: var(--color-pink); }

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

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

body{   color: color(primary);   background: color(primary, 0.5); }

Вот сам код:

$colors_theme : (   "primary"   : "pink",   "secondary" : "blue" );  $colors : (   "pink"  : #E20071,   "blue"  : #00A3DA,   "gray"  : #939394,   "white" : #FFFFFF,   "black" : #1B1B1B, );  @function HexToRGB($hex) {   @return red($hex), green($hex), blue($hex); }  @function color($name, $opacity: false) {   @if $opacity {     @return rgba(var(--color-#{unquote($name)}--rgb), $opacity);   } @else {     @return var(--color-#{unquote($name)});   } }  :root{   @if $colors {     @if $colors_theme {       @each $key, $value in $colors_theme {         --color-#{$key} : var(--color-#{$value});         --color-#{$key}--rgb : var(--color-#{$value}--rgb);       }     }      @each $key, $value in $colors {       --color-#{$key} : #{$value};       --color-#{$key}--rgb : #{HexToRGB($value)};     }   } }

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

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

Прошу строго не судить — это первая статья на Хабре.