Comments 14
Я вижу что 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')");
Не совсем ясно, зачем вы все эти операции делали, и чего добились. Было бы удобнее воспринимать это в таком виде — Есть такая задача — решалась так — а теперь решается так. Вы примерно это и хотели, как я понимая, но со стороны не очень понятно.
Добавил описание задачи в начале статьи.
— это заблуждение, у них разные цели. И эта фраза — показатель того, что вы еще не во всем разобрались. Там даже в комментария к ней написано:
Это предложение написано от предосторожности комментариев: Зачем CSS переменные, есть же Sass??!!
И если вы посмотрите на код внимательно, то как раз вы увидите как я использую их совместно.
Нет необходимости использовать HSL формат в моих проектах, все цвета задаёт дизайнер в макете. Далее это верстается без изменений. Если вы хотите использовать HSL, а не rbg, то замените их в приведенных выше примерах, сути дело не меняет.
p.s большинство используют HEX формат и для многих эта статья будет актуальной. Смотрите результат голосования в конце этой статьи.
А чем вам не угодил transparentize
?
Небольшая проблема – функция 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));
}
Спасибо за находчивость! У себя в проектах использую сокращение cl — для скорости. И в статье теперь тоже переименовал.
Далее, функция rgba это функция CSS, а не Sass, тем самым решения, которые я привёл выше, только лишь автоматизируют процесс контроля/управления цветами. На выходе это CSS.
Цель моего решения — иметь на входе HEX формат. А у вас в примере HSL формат цвета в переменной primary
. Но, преобразовав HEX в HSL, и заменив в примерах rgba на hsl, вы так же сможете использовать приведенные выше методы для автоматизации сего процесса.
Эта статья посвящена обзору моих наработок в 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, неважно), продолжаешь работать.
В каком месте и когда мне должно стать легче использую код выше?
В каком формате указываете цвета в ваших проектах?
Копипаст из фигмы. В каком формате — не смотрю.
CSS var в rgba или удобное использование цветов в Sass