在不嵌套到子类或mixin的情况下限制变量范围？

Question

我想在几个类中使用变量，所以我这样做：

$height: 100px

#foo
  height: $height

#bar
  height: $height

但这污染了全局变量范围，因此我想使用一个子范围。

当我有一个通用的元素容器时，它很简单：

#common-container
  $height: 100px

  #foo
    height: $height

  #bar
    height: $height

但是，此方法不是污染全局变量范围，而是污染最终的CSS：绝对不需要链接选择器。在某些情况下，元素没有通用的容器，因此这种方法根本不是一种选择。

我尝试通过使用虚拟mixin解决此问题：

=local-scope
  @content

似乎工作正常：

+local-scope
  $foo: foo

@warn $foo // -> Error: Undefined variable: "$font-size".

但是，如果在使用mixin之前声明了变量，它将被覆盖！:(

$foo: foo

+local-scope
  $foo: bar

@warn $foo // -> bar

问题是：如何正确地限制变量作用域而不弄乱全局名称空间，也不必不必要地链接选择器？

Answer 1

尽管这样做可以防止内联@imports，但我仍然认为这是一种暗模式，因为它暗中鼓励复杂的特异性。

@at-root {
  $this: that;  // not a global variable

  .your-original-css {
    // rules
  }
}