Эта статья посвящена обзору моих наработок в 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 формате, можно легко изменить цветовую палитру сайта. И не прибегнуть к дополнительным кододвижениям.
Прошу строго не судить это первая статья на Хабре.
