sass - 限制变量范围而不嵌套到子类或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

问题是：我如何正确地限制变量范围，而不会弄乱全局命名空间，也不会不必要地链接选择器？

score 5 · Accepted Answer

虽然这可以防止 inline @imports，但我认为无论如何这是一个黑暗的模式，因为它暗中鼓励复杂的特异性。

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

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

score 2 · Accepted Answer

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

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

@debug $foo; // undefined

请注意，您不能在 if 语句中导入。

score 0 · Accepted Answer

所以这在 Sass 中是不可用的。

但要到 Sass 4.0 才会实施。

3 回答 3