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

Question

我有以下情况:

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

我正在尝试更改媒体查询中的 sass 变量，但它总是以某种方式返回 deskConfig

这是预期的行为吗？

Answer 1

这是一个常见错误的不寻常实例:您混合了服务器端和客户端逻辑。

@media (min-width: 750px) { ... } block 是一个指令，它被传递到网络浏览器以在运行时进行评估，并有条件地应用规则。当您调整浏览器窗口或视口(viewport)的大小时，浏览器将不断地重新检查此条件，并决定是否应用它包含的 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 block 中，并生成两个版本的每个提到该变量的规则，所以 .foo { color: $var; } 自动变成 .foo { color: red; } @media(min-width: 750px) { .foo { 颜色:红色； } } 。但这将非常复杂，而且坦率地说相当困惑。