sass - 限制变量范围而不嵌套到子类或混入中？

Question

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

$height: 100px

#foo
  height: $height

#bar
  height: $height

但这会污染全局变量作用域，所以我想使用子作用域。

当我有一个共同的元素容器时，这很简单:

#common-container
  $height: 100px

  #foo
    height: $height

  #bar
    height: $height

但是这种方法不会污染全局变量范围，而是会污染生成的 CSS:链式选择器绝对没有必要。在某些情况下，元素没有共同的容器，因此这种方法根本不是一种选择。

我尝试使用虚拟混合来解决这个问题:

=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
  }
}