SCSS编译器无法使用@media变量

Question

我试图弄清楚为什么失败

$media-xsmall: screen and (max-width: 600px);
// OR, $media-xsmall: (screen and (max-width: 600px));
@media #{$media-xsmall}{
  // something
}

但这运行没有问题

@media screen and (max-width: 600px){
  // something
  .test{
    color: green;
  }
}

我得到的错误是：

Error: (max-width: 600px) isn't a valid CSS value.
        on line 2 of stdin
>> $media-xsmall: screen and (max-width: 600px);
   ---------------------------^

有人知道为什么会发生这种情况吗？

Answer 1

您不能将这样的值存储在变量中，需要将其放在引号之间：

$media-xsmall: "screen and (max-width: 600px)";

@media #{$media-xsmall} {
  .test{
    color: green;
  }
}