Sass ломается из-за пользовательских свойств CSS?

Скажем, у вас есть пользовательское свойство CSS для цвета:

--color: 255,0,0

И вы хотите каждый раз специально смешивать его с rgb или rgba по мере надобности. Это действительный CSS:

rgba(var(--color), .3)

...но Сасс взрывается. Я пытался понять, смогу ли я написать миксин или что-то в этом роде, но я не могу понять, как обойти настойчивость Sass в использовании собственных функций цвета, даже если они не нужны.


css sass css-variables mixins
person dougoftheabaci    schedule 27.04.2017    source источник
comment
Для дополнительного контекста я знаю, что это явно должно быть три цифры в том, как определяется переменная. И я проверил это в ванильном CSS, это работает. Похоже, это ошибка, из-за которой Sass еще не знает, как работать с пользовательскими свойствами.   -  person dougoftheabaci    schedule 28.04.2017

Ответы (4)


arrow_upward
5
arrow_downward

Понятно! Это немного хакерски, но это позволяет вам создать пользовательскую функцию, которая использует функцию rgba() с пользовательскими свойствами CSS (как разрешено в спецификации):

@function swatch($swatch-color, $swatch-alpha:1) {
  @return unquote("rgba(var(--#{$swatch-color}), #{$swatch-alpha})");
}
:root {
  --green: 0,255,0;
}
.green { color: swatch(green, .1); }

Ключ к решению найден в отчете об ошибках Sass. Это работает только потому, что снятие кавычек и интерполяция обходят функцию rgba() по умолчанию.

person dougoftheabaci    schedule 29.04.2017

arrow_upward
3
arrow_downward

Возможно, с помощью интерполяции rgba(#{--color}, .3)?

person Brice    schedule 27.04.2017
comment
Возвращается с ошибкой: Error: argument $color` из rgba($color, $alpha) должен быть цветом` - person dougoftheabaci; 28.04.2017

arrow_upward
1
arrow_downward

Другой временный обходной путь для этого — использовать значения RGB только в ваших переменных, как вы уже сделали:

--color: 255, 255, 255;

Затем, если вы используете функцию RGB или RGBA с заглавными, SASS проигнорирует ее, и простой CSS сможет ее проанализировать. Затем вы можете настроить непрозрачность!

RGB(var(--color));
RGBA(var(--color), .3);
person NicoleMoore    schedule 22.01.2019

arrow_upward
-1
arrow_downward

rgba(var(--color), .3) недействителен:

div {
  width: 50px;
  height: 20px;
  outline: 1px dashed black;
}

:root {
  --color: red;
}

#correct {
  background: var(--color);
}

#incorrect {
  background: rgba(var(--color), .3);
}
<div id="correct"></div>
<div id="incorrect"></div>

person Ilyas Kabirov    schedule 27.04.2017
comment
--color: red; сделает его недействительным. Обратите внимание, как я использую --color: 255,0,0;. - person dougoftheabaci; 28.04.2017
comment
Это работает в чистом CSS: :root { --color: 255,0,0; } div { background-color: rgba(var(--color), .3); } - person dougoftheabaci; 28.04.2017