css - 为什么 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

您可以将视口(viewport)缩小到 <= 600px 并看到背景变为红色，但变量根本没有变化。我希望变量更改的值为“100vw”，但它仍保留原始值“80vw”。

Answer 1

您缺少定义 width 您定义的是 variable 而不是 width。

仅更改变量不会影响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