Эта статья посвящена обзору моих наработок в Sass, которые облегчают жизнь при работе с цветами во время верстки. Мы рассмотрим 3 подхода, которые воедино принесут комфорт в работу с цветами.
Задача:
Быстрое изменение палитры цветов и их прозрачность(именно CSS var) для всего сайта , используя только HEX формат.
Решение:
Создание массива с нужными цветами. Далее, автоматическое создание переменных. И написание функции, которая изменяет прозрачность у CSS var.
В итоге, такая запись:
body{
color: cl(primary);
background: cl(primary, 0.5);
}
Будет эквивалентна такой (можно посмотреть живой пример на codepen):
: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 Прозрачность цвета
Для использования прозрачности в 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 переменной, напишем функцию cl (сокращение от слова color).
@function cl($name) {
@return var(--color-#{unquote($name)});
}
Теперь запись:
body{
background: cl(pink);
}
Равнозначна такой:
body{
background: var(--color-pink);
}
Sass Простая магия
Теперь покажу пример, как используя 3 этих подхода, можно управлять цветами (CSS переменными) так, используя массив как тему (потрогать на codepen):
body{
color: cl(primary);
background: cl(primary, 0.5);
}
Вот полный код
$colors_theme : ( "primary" : "gray", "secondary" : "blue" ); $colors : ( "pink" : #E20071, "gray" : #6c6d6d, "blue" : #5096b1, "white" : #FFFFFF, "black" : #1B1B1B, ); @function HexToRGB($hex) { @return red($hex), green($hex), blue($hex); } @function cl($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)}; } } } body{ background-color: cl(secondary, 0.5); h2{ color: cl(primary); } }
Ну вот и все, в качестве вывода можно сказать, что благодаря подобным функциям упрощается и ускоряется работа с цветами.
Более того, с помощью данных функций, имея в качестве входного значения цвет только в HEX формате, можно легко изменить цветовую палитру сайта. И не прибегнуть к дополнительным кододвижениям.
Возможно вам будет интересно прочитать — Топ 5 причин, почему мне нравятся пользовательские свойства CSS.