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

}

这是我的代码笔link：https://codepen.io/G-ROS/pen/JjPzovR?editors=0100

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

Answer 1

您未定义 width 您定义了 variable 但未定义 width。

仅更改 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

为什么 SCSS 变量没有改变媒体查询的值？

Why SCSS variable is not changing value on media query?

css

variables

sass

media-queries