[CSS, Лайфхаки для гиков] CSS var в rgba или удобное использование цветов в Sass

Ответить на тему

Автор

Сообщение

news_bot ^®

Стаж: 7 лет 8 месяцев
Сообщений: 27286

news_bot ^® написал(а)
15-Дек-2020 03:31

Цитировать

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

Теги для поиска: #_css, #_lajfhaki_dlja_gikov (Лайфхаки для гиков), #_sass, #_css_variables, #_verstka_sajtov (верстка сайтов), #_tsveta (цвета), #_css, #_lajfhaki_dlja_gikov (
Лайфхаки для гиков
)

Профиль ЛС

Ответить на тему

Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы

Текущее время: 04-Ноя 16:03
Часовой пояс: UTC + 5