Css 使用媒体查询使用Sass设置变量值

我有以下情况：

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

我试图在媒体查询中更改sass变量，但它总是返回

deskConfig

---

这是预期的行为吗

Sass变量范围与其他实现略有不同：

• 始终设置全局变量，不要在整个过程中重置它们 样式表
• 利用！默认标志

有关更多信息：

---

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

@media（最小宽度：750px）{…}

块是一个指令，它被传递到web浏览器以在运行时进行计算，并有条件地应用规则。调整浏览器窗口或视口的大小时，浏览器将不断重新检查此条件，并决定是否应用其包含的CSS规则

$var:deskConfig赋值是SASS/SCSS编译器的指令。这将运行整个文件，对其进行处理并返回结果，结果可能会保存到磁盘，并提供给访问的每个浏览器。编译器无法知道有人将在多大的窗口中浏览站点

SASS对
@media
查询所能做的唯一一件事就是决定在结果CSS中的何处回显它们。例如，您可以“由内而外”嵌套内容，如
.foo{@media（最小宽度：750px）{color:red；}}
，SASS将生成正确的CSS
@media（最小宽度：750px）{.foo{color:red；}

我猜理论上编译器可以检测到赋值在
@media
块中，并生成提到该变量的每个规则的两个版本，这样
.foo{color:$var；}
自动成为
.foo{color:red；}@media（最小宽度：750px）{.foo{color:red；}
。但这将是难以置信的复杂，坦率地说相当令人困惑。
我已经尝试过了，然后我解决了我的问题。它将根据给定的速率（基本大小/速率大小）自动计算所有媒体断点

请访问解决方案：

$var: mobiConfig;
@media (min-width: 750px) { 
  $var: deskConfig !global;
  xxx: $var;                // = deskConfig 
  $var: mobiConfig !global;
}
yyy: $var;                  // = mobiConfig 

可能重复的