change variable values in @media queries

I would like to change variable value in media query and have automatically generated css where that variable was used.

I’m currently using variable to determine width of the sidebar:

LEFT_SIDEBAR = 200px;

Then using it as:

.sidebar
  width: LEFT_SIDEBAR

.content
  left: LEFT_SIDEBAR

But when I try to change variable value in media query it generates nothing:

@media screen and (max-width: 1000px)
  LEFT_SIDEBAR = 150px;

What I would expect is to see this:

.sidebar {
  width: 200px;
}
.content {
  left: 200px;
}
@media screen and (max-width: 1000px) {
  .sidebar {
    width: 150px;
  }
  .content {
    left: 150px;
  }
}

[kolesnikova-tavi]

I do something like that:

$media_mobile_landscape = 480px
$media_mobile = 320px

mobile()
  @media screen and (max-width: $media_mobile)
    {block}

mobile_landscape()
  @media screen and (max-width: $media_mobile_landscape)
    {block}

only_mobile_landscape()
  @media screen and (min-width: $media_mobile + 1px) and (max-width: $media_mobile_landscape)
    {block}

And then

+mobile()
    body
        background #f00

+only_mobile_landscape()
    body
        background #00f

[mynameistechno]

This would be awesome for use with dark mode, e.g.

@media (prefers-color-scheme: dark) {
  $background-color = black;
  $text-color = white;
}