我有以下情况:
$var: mobiConfig;
@media (min-width: 750px) {
$var: deskConfig;
}
我正在尝试更改媒体查询中的 sass 变量,但它总是以某种方式返回 deskConfig
这是预期的行为吗?
最佳答案
这是一个常见错误的不寻常实例:您混合了服务器端和客户端逻辑。
@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 { 颜色:红色; } }
。但这将非常复杂,而且坦率地说相当困惑。
关于css - 使用媒体查询通过 Sass 设置变量值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49436927/