Question

我有以下情况：

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

我正在尝试更改媒体查询中的sass变量，并以某种方式始终返回deskConfig

这是预期的行为吗？

Answer 1

这是一个常见错误的异常情况：您正在混合服务器端和客户端逻辑。

@media (min-width: 750px) { ... }块是一个指令，它被传递到Web浏览器以在运行时进行评估，并有条件地应用规则。当您调整浏览器窗口或视口的大小时，浏览器将不断重新检查此条件，并决定是否应用它包含的CSS规则。

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

SASS对@media查询唯一能做的就是决定在生成的CSS中回显它们的位置。例如，您可以嵌套内容＆＃34;内部＆＃34;，例如.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; } }。但那将是非常复杂的，坦率地说相当混乱。

Answer 2

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

始终设置全局变量，不要在整个过程中重置它们 stylesheet
使用！default flag

欲了解更多信息： https://anotheruiguy.gitbooks.io/sassintherealworld_book-i/handy-tools/variable-scoping.html

Answer 3

我已经尝试过了，然后解决了问题。它将根据给定的速率（基本大小/速率大小）自动计算所有媒体断点

访问Using media-queries to set variable values using Sass

Answer 4

解决方案：

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

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

4 个答案: