媒体查询中全局变量的设置值（重新访问）

Question

根据回复，我写道：

$global-padding: 1em;
@media only screen and (max-width: 20em) {
    $global-padding: 0.5em !global;
}

出于某种原因，内边距始终为 0.5em，而不仅仅是在屏幕最多 20em 宽时。我错过了什么？

Answer 1

据我所知，documentation 全局变量在编译时被覆盖，一旦嵌套规则被处理 - 而不是满足任何条件。这不是运行时功能。在编译期间，所有 SCSS 都编译为普通的旧 CSS。

A variable declaration flagged as !global will always assign to the global scope.

所以做这样的事情：

$variable: foo;

.content {
  $variable: bar !global;
  value: $variable;
}

.sidebar {
  value: $variable;
}

会产生

.content {
  value: bar;
}

.sidebar {
  value: bar;
}

您尝试做的事情可以用 css 个自定义变量来完成：

:root {
  --global-padding: 1em;
  @media only screen and (max-width: 20em) {
    --global-padding: 0.5em;
  }
}

Setting value of a global variable in media query (revisited)