Почему переменная SCSS не меняет значение в медиа-запросе?

Question

Хочу изменить значение моей переменной в медиа-запросах, но значение не меняется вообще.Почему это так?

Я попытался просто изменить значение в медиа-запросе, но ничего не произошло.

// My variables
// All these variables works outside the media queries

$marq-width: 80vw; // using this one
$marq-height: 20vh;
$marq-elm-displayed: 5;
$marq-elements: 9;
$marq-elm-width: calc( #{$marq-width} / #{$marq-elm-displayed} );
$marq-animation-duration: calc(#{$marq-elements} * 3s);
$color: black;
$break-md: 600px;


// Here is my problem

@media(max-width: 600px) {
  body {
    background: red; // this works
  }

  $marq-width: 100vw; // this not work

}

Вот моя ссылка на кодовый указатель: https://codepen.io/G-ROS/pen/JjPzovR?editors=0100

ВыМожно уменьшить область просмотра на <= 600px и увидеть, что фон меняется на красный, но переменная вообще не изменилась.Я ожидаю, что переменные изменения имеют значение "100vw", но они остаются с исходным значением "80vw". </p>

Answer 1

Вам не хватает, чтобы определить width Вы определяете variable, но не width.

только для chnaging variable не повлияет на css вы будете использовать эту переменную для таких css как показано ниже.

@media(max-width: 600px) {
  body {
    background: red; // this works
  }

  $marq-width: 100vw; // this will not work
  .marquee{width:$marq-width;}  // this works

}

Проверьте codepen