[SASS] почему переменные breakpoints не срабатывают в media-queries?

Question

[movsumlu]

всем привет, столкнулся с такой проблемой, что импортирую sass-переменные в компоненты, цвета в переменных применяются корректно, а переменные в media - не работают, не понимаю в чем дело (если руками прописать media (max-width: 550px) - все работает):

// variables.scss
:root {
  --small-screen: 520px;
  --text-color: #b1bdb4;
}

// app.scss
@media (max-width: var(--small-screen)) {
  .sidebar {...}
}

Answer 1

[Сергей delphinpro]

Custom properies не работают в выражениях медиазапросов. Да и в любых других.
Их можно использовать только в качестве значения свойства элемента (селектора).

К размышлению. Как должен был бы повести себя следующий код:

:root {
  --small-screen: 500px;
}
.sidebar { background: red; }

@media (max-width: var(--small-screen)) {
  :root {
    --small-screen: 1000px;
  }
  .sidebar { background: green; }
}