css - 为什么SCSS变量不改变媒体查询的值？

想要在媒体查询中更改我的变量值，但该值完全不变。这是为什么？

我试图简单地更改媒体查询上的值，但没有任何反应。

// 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

您可以将视口缩小为

最佳答案

您缺少定义width的定义，但没有定义variable的定义。
仅更改width不会影响variable，您将对该变量使用如下所示的css。

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

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

}

检查codepen