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”。

Answer 1

您缺少定义width的定义，而没有定义variable的定义。

仅更改width不会对variable产生影响，您将像下面这样将变量用于css。

css

检查codepen

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

1 个答案: