[SASS] why are breakpoints not firing in media-queries?

Question

css

Hello everyone, I ran into such a problem that I import sass variables into components, the colors in the variables are applied correctly, and the variables in the media do not work, I don’t understand what’s the matter (if you manually write media (max-width: 550px) - everything works ):

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

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

Answer 1

Custom properties do not work in media query expressions. Yes, and in any other.
They can only be used as the value of an element property (selector).
To contemplation. How should the following code behave:

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

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