css - 使用媒体查询通过Sass设置变量值

我有以下情况:

$var: mobiConfig;
@media (min-width: 750px) {
 $var: deskConfig;
}

我正在尝试在媒体查询中更改sass变量，并且总是以某种方式返回deskConfig
这是预期的行为吗？

最佳答案

这是一个常见错误的不寻常实例:您正在混合服务器端和客户端逻辑。
@media (min-width: 750px) { ... }块是一个指令，该指令传递到Web浏览器以在运行时进行评估，并有条件地应用规则。调整浏览器窗口或视口的大小时，浏览器将不断重新检查此条件，并决定是否应用其包含的CSS规则。

另一方面，$var: deskConfig;分配是SASS / SCSS编译器的指令。这将遍历整个文件，对其进行处理，然后返回结果，该结果可能会保存到磁盘，并提供给所有访问的浏览器。编译器无法知道某人将在其中浏览站点的大小窗口。

SASS可以对@media查询执行的唯一操作是确定在生成的CSS中应在何处回显它们。例如，您可以将内容“内而外”嵌套，例如.foo { @media(min-width: 750px) { color: red; } }，SASS将生成正确的CSS @media(min-width: 750px) { .foo { color: red; } }。

我想从理论上讲，编译器可以检测到该赋值在@media块中，并为提及该变量的每个规则生成两个版本，以便.foo { color: $var; }自动变为.foo { color: red; } @media(min-width: 750px) { .foo { color: red; } }。但这将是极其复杂的，并且坦率地说相当令人困惑。