Ошибка с переменными css в scss?

Question

[liltrill]

Всем привет, ошибка в компиляторе scss хотя код валидный:

div {
     --value-filter: 100%;

     filter: grayscale(var(--value-filter));
}

Comments

[Rustam Bainazarov]

https://dev.to/meduzen/write-css-variables-faster-...

Попробуйте обернуть в это, будет ошибка? Просто я с этой штукой использую их с самого начала.

Через 10 минут попробую сделать без этой функции напрямую.

И можно более полный код? А то я не вижу самого SASS-кода, только CSS.

[liltrill]

Рустам Байназаров,

function.scss:

@function v($var, $fallback: null) {
  @if($fallback) {
    @return var(--#{$var}, $fallback);
  } @else {
    @return var(--#{$var});
  }
}

component:

&__icon-card {
     --value-filter: 100%;

     filter: grayscale(v(value-filter));
     transition: $transition;
}

[liltrill]

Рустам Байназаров, Да только css :) но это в scss файле, и должно работать но не работает(((. Компилятор с ума сходит.

[Rustam Bainazarov]

liltrill, смотрите:
https://github.com/sass/libsass/issues/151

Это конфликт функции SASS и синтаксиса фильтра grayscale.

[Rustam Bainazarov]

liltrill, решение:



Пишу ответ :))

[liltrill]

Рустам Байназаров, Я нашел, спасибо за ссылку на issues.

&__icon-card {
    --value-filter: 100%;

    filter: #{"grayscale( var(--value-filter) )"};
    transition: $transition;
  }

Вот так работает, но тут не доступна функция v:

@function v($var, $fallback: null) {
  @if($fallback) {
    @return var(--#{$var}, $fallback);
  } @else {
    @return var(--#{$var});
  }
}

Но зато прозрачное решение :)

[Rustam Bainazarov]

liltrill, смотрите ответ.

Answer 1

[Rustam Bainazarov]

Это конфликт синтаксисов функции SASS и фильтра gr...

Решение на миксине:


Если без миксина:

Comments

[liltrill]

Спасибо :)

[Михаил]

префиксы в 2к20?

[Rustam Bainazarov]

Михаил, это не мой миксин (ссылка в ответе). Мне было лень убирать эти строки с телефона. Точнее, я еле название-то поменял, ибо поле позиция курсора с телефона сбивалась постоянно.

Во втором примере я тупо напечатал это всё вручную. И уже там без префиксов. Как домой доеду, я поменяю пример.