Sass не может обработать новый at-rule @custom-media. Что делать?

Question

[Eugene3011]

@custom-media --phone-small (width >= #{$breakpoint-tablet-small})

Я хотел добавить кастомные медиа запросы в свой проект, видел как-то точно такое же у кого-то, но в итоге я столкнулся с тем что sass вообще никак не хочет взаимодействовать с неизвестными ему at-rules. В самом редакторе высвечивается ошибка

({ expected scss(css-lcurlyexpected)

Так и при попытке сборки так же выдает ошибку. Никакая нейросеть не смогла в итоге помочь. Поэтому последняя надежда, что может тут кто-то сможет помочь.

Comments

[Aetae]

Насколько я знаю, @custom-media - мертвороженная фича, которая нигде не работает, sass, соответственно, её не поддерживает.
Любая постобработка обычно происходит уже после того как sass превратит результат в css, потому обычное использование postcss-плагина тут тоже не поможет.
Теоретически можно что-то вкорячить, но проще забить и работать по-старинке.

[Ankhena]

Какая цель таким образом смешивать нативный (из возможного будущего) css и препроцессор?
Я понимаю, избавиться от зависимости препроцессорных переменных. А тут профит не понятен.

Это так, по теме, на всякий Как подставить в @media screen переменную из css?

Answer 1

[Алексей Ярков]

Полагаю что никак. Этого at-rule нет в списке поддерживаемых.

Answer 2

[sergski]

Просто используйте переменные и миксины

Answer 3

[Eugene3011]

Всем спасибо за ответы, я поискал что можно придумать, вроде у sass есть javascript api с помощью которого можно делать дополнения, так что я посмотрю можно ли с помощью него написать свою поддержку. А так в итоге единственное быстрое решение это всё таки использовать по классике миксины как оказалось.