sass - 带有媒体查询的 SASS 变量导致“'@' 之后的 CSS 无效”

Question

基本想法是在一个地方定义我的媒体查询。我目前的尝试是这样的：

$mobile: "@media (max-width: 600px):not(#app.force-desktop)";


#{$mobile} {
  ...
}

但是，这会导致错误：SassError: Invalid CSS after "@": expected selector, was "@media (max-width: "将 $mobile 设置为（例如）:not(#app.force-desktop)似乎只能正确编译。

也许有一种不同的方法可以解决这个问题，这对我来说完全没问题。

标签： sass

Answer 1

您可以删除@media：

$mobile: '(max-width: 600px):not(#app.force-desktop)';

@media #{$mobile} {
    body {
        color: blue;
    }
}