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

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