Salk 15 дек 2020 в 00:44

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

3 мин

17K

CSS*Лайфхаки для гиков

Из песочницы

+13

Комментарии 14

ivan386 15 дек 2020 в 02:51

Я вижу что CSS переменные используют в :root элементе просто как константы. Но это переменные. Элемены и правила их могут переопределить.

Раньше когда я делал NoScript фотоальбом мне приходилось для каждого изображения создавать отдельное CSS правило.

#lnk0:focus, #lnk0:hover:after{
    background-image: url('http://kirpich.example.com/imgs/rust/rust_vid-1.jpg');
}
#lnk1:focus, #lnk1:hover:after{
    background-image: url('http://kirpich.example.com/imgs/fjord/fjord_vid-1.jpg');
}

А теперь можно обойтись общим CSS правилом:

.lnk:focus, .lnk:hover:after{
    background-image: var(--img-url);
}

А сылку на изображение уже можно задать в самом элементе.

<a ... class="lnk" 
   style="--img-url: url('http://kirpich.example.com/imgs/rust/rust_vid-1.jpg')">
    ...
</a>

Но CSS переменные можно использовать и в JavaScript.

element.style.setProperty("--img-url", "url('http://kirpich.example.com/imgs/rust/rust_vid-1.jpg')");

Alexufo 15 дек 2020 в 03:47

HEX поддерживает прозрачность, она же копипастится из девконсоли в css. Почему нельзя массив сразу набить? Да и в RGB можно цвета сразу копипастить с прозрачностью.

Salk 15 дек 2020 в 23:25

Если в проекте используется десятки разных элементов с прозрачностью от основных цветов, и добавление всех таких цветов, приведёт к множеству не нужных переменных, а множество к
хорошему не приведет.

НЛО прилетело и опубликовало эту надпись здесь

Salk 15 дек 2020 в 23:35

Не совсем ясно, зачем вы все эти операции делали, и чего добились. Было бы удобнее воспринимать это в таком виде — Есть такая задача — решалась так — а теперь решается так. Вы примерно это и хотели, как я понимая, но со стороны не очень понятно.

Добавил описание задачи в начале статьи.

— это заблуждение, у них разные цели. И эта фраза — показатель того, что вы еще не во всем разобрались. Там даже в комментария к ней написано:

Это предложение написано от предосторожности комментариев: Зачем CSS переменные, есть же Sass??!!
И если вы посмотрите на код внимательно, то как раз вы увидите как я использую их совместно.

Нет необходимости использовать HSL формат в моих проектах, все цвета задаёт дизайнер в макете. Далее это верстается без изменений. Если вы хотите использовать HSL, а не rbg, то замените их в приведенных выше примерах, сути дело не меняет.

p.s большинство используют HEX формат и для многих эта статья будет актуальной. Смотрите результат голосования в конце этой статьи.

НЛО прилетело и опубликовало эту надпись здесь

Salk 16 дек 2020 в 00:48

Статья строится на объединении 3х методах. И в самой статье я описываю каждый из. Данное описание относится к конкретному методу преобразования.
А в целом, статья нацелена на изменение CSS var имея на старте HEX формат.

baldrs 15 дек 2020 в 13:42

А чем вам не угодил transparentize?

Salk 15 дек 2020 в 15:09

Вы не поняли суть статьи, управлять необходимо CSS var.
Функция transparentize не умеет управлять CSS var.

monochromer 15 дек 2020 в 19:38

Небольшая проблема – функция color уже есть в спецификации (хоть и черновике) W3C, поэтому придется переименовать, чтобы не было конфликтов.

А вообще задача уже решается на одном лишь CSS c хорошей поддержкой:

:root {
  --primary: 240deg 100% 70%; /* hsl format */
}

body {
  background-color: hsl(var(--primary) / 0.36);
}

Прозрачность тоже можно задать через пользовательское свойство:

body {
  --opacity: 1;
  background-color: hsl(var(--primary) / var(--opacity));
}

Salk 15 дек 2020 в 23:15

Спасибо за находчивость! У себя в проектах использую сокращение cl — для скорости. И в статье теперь тоже переименовал.
Далее, функция rgba это функция CSS, а не Sass, тем самым решения, которые я привёл выше, только лишь автоматизируют процесс контроля/управления цветами. На выходе это CSS.
Цель моего решения — иметь на входе HEX формат. А у вас в примере HSL формат цвета в переменной primary. Но, преобразовав HEX в HSL, и заменив в примерах rgba на hsl, вы так же сможете использовать приведенные выше методы для автоматизации сего процесса.

monochromer 16 дек 2020 в 08:00

Не знаю, зачем именно вам hex-формат, но hsl видится гораздо удобнее (например, статья 1 и статья 2). Функции rgba и hsla в том виде, в котором SASS их использует, не работают в CSS.

НЛО прилетело и опубликовало эту надпись здесь

noodles 20 дек 2020 в 12:32

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

В который раз не понимаю в какой момент времени и что именно мне облегчит, и как именно облегчит вот это ~~жесть~~ «программирование на стилях»:

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

$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 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)};
    }
  }
}

Вот обычный рабочий флоу:
Есть макет от дизайн-отдела с отдельным артбордом, в котором цветовая палитра, шрифты, базовые компоненты, какие-то правила по сетке и/или вертикальному ритму, и т.д.
Загнал все возможные цвета в переменные (css или scss, неважно), продолжаешь работать.

В каком месте и когда мне должно стать легче использую код выше?

В каком формате указываете цвета в ваших проектах?

Копипаст из фигмы. В каком формате — не смотрю.

-1

Зарегистрируйтесь на Хабре, чтобы оставить комментарий

Показать лучшие за всё время