Sass SCSS编译器不使用@media的变量

我想弄明白为什么这个失败了

$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);
   ---------------------------^

---

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

你不能在变量中存储这样的值，你需要把它放在引号之间：

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

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