限制变量范围而不嵌套到子类或mixin？

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

Answer 2

您可以为此目的使用@if语句：

@if (true) {
    $foo: bar;
    @debug $foo;
}

@debug $foo; // undefined

请注意，您无法在if语句中导入。

Answer 3

所以这在Sass中不可用。

Sass问题队列中有一张票：https://github.com/nex3/sass/issues/136

但是直到Sass 4.0才会实现。