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

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

Задача:

Быстрое изменение палитры цветов и их прозрачность(именно CSS var) для всего сайта , используя только HEX формат.

Решение:

Создание массива с нужными цветами. Далее, автоматическое создание переменных. И написание функции, которая изменяет прозрачность у CSS var.

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

1
2
3
4
<span class="hljs-selector-tag">body</span>{
  <span class="hljs-attribute">color</span>: <span class="hljs-built_in">cl</span>(primary);
  <span class="hljs-attribute">background</span>: <span class="hljs-built_in">cl</span>(primary, <span class="hljs-number">0.5</span>);
}

Будет эквивалентна такой (можно посмотреть живой пример на codepen):

1
2
3
4
5
6
7
8
9
<span class="hljs-selector-pseudo">:root</span> {
  <span class="hljs-attribute">--color-pink</span>: <span class="hljs-number">#E20071</span>;
  <span class="hljs-attribute">--color-pink--rgb</span>: <span class="hljs-number">226</span>, <span class="hljs-number">0</span>, <span class="hljs-number">113</span>;
}
 
<span class="hljs-selector-tag">body</span> {
  <span class="hljs-attribute">color</span>: <span class="hljs-built_in">var</span>(--color-pink);
  <span class="hljs-attribute">background</span>: <span class="hljs-built_in">rgba</span>(var(--color-pink--rgb), <span class="hljs-number">0.5</span>);
}

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

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

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

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

1
2
3
4
5
6
7
$<span class="hljs-selector-tag">colors</span> : (
  "<span class="hljs-selector-tag">pink</span>"  : <span class="hljs-selector-id">#E20071</span>,
  "<span class="hljs-selector-tag">blue</span>"  : <span class="hljs-selector-id">#00A3DA</span>,
  "<span class="hljs-selector-tag">gray</span>"  : <span class="hljs-selector-id">#939394</span>,
  "<span class="hljs-selector-tag">white</span>" : <span class="hljs-selector-id">#FFFFFF</span>,
  "<span class="hljs-selector-tag">black</span>" : <span class="hljs-selector-id">#1B1B1B</span>,
);

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

1
2
3
4
5
<span class="hljs-selector-pseudo">:root</span>{
  @each $key, $value in $colors {
    --color-#{$key} : #{$value};
  }
}

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

1
2
3
4
5
6
7
<span class="hljs-selector-pseudo">:root</span> {
  <span class="hljs-attribute">--color-pink</span>: <span class="hljs-number">#E20071</span>;
  <span class="hljs-attribute">--color-blue</span>: <span class="hljs-number">#00A3DA</span>;
  <span class="hljs-attribute">--color-gray</span>: <span class="hljs-number">#939394</span>;
  <span class="hljs-attribute">--color-white</span>: <span class="hljs-number">#FFFFFF</span>;
  <span class="hljs-attribute">--color-black</span>: <span class="hljs-number">#1B1B1B</span>;
}

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

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

1
2
3
<span class="hljs-keyword">@function</span> HexToRGB($hex) {
  <span class="hljs-keyword">@return</span> red($hex), green($hex), blue($hex);
}

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

1
2
3
<span class="hljs-selector-pseudo">:root</span> {
  <span class="hljs-attribute">--color-pink-rgb</span>: #{<span class="hljs-built_in">HexToRGB</span>(#E20071)};
}

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

1
2
3
4
<span class="hljs-selector-tag">body</span>{
  <span class="hljs-attribute">background</span>: <span class="hljs-built_in">rgba</span>(var(--color-pink-rgb), <span class="hljs-number">0.5</span>);
}
 

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

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

1
2
3
<span class="hljs-keyword">@function</span> cl($name) {
  <span class="hljs-keyword">@return</span> var(--color-#{<span class="hljs-selector-tag">unquote</span>($<span class="hljs-selector-tag">name</span>)});
}

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

1
2
3
<span class="hljs-selector-tag">body</span>{
  <span class="hljs-attribute">background</span>: <span class="hljs-built_in">cl</span>(pink);
}

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

1
2
3
<span class="hljs-selector-tag">body</span>{
  <span class="hljs-attribute">background</span>: <span class="hljs-built_in">var</span>(--color-pink);
}

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

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

1
2
3
4
<span class="hljs-selector-tag">body</span>{
  <span class="hljs-attribute">color</span>: <span class="hljs-built_in">cl</span>(primary);
  <span class="hljs-attribute">background</span>: <span class="hljs-built_in">cl</span>(primary, <span class="hljs-number">0.5</span>);
}

Вот полный код

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
$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.

источник