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

我想在几个类中使用一个变量，所以我会：

$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之前声明了一个变量，它就会被覆盖(

---

问题是：如何正确限制变量范围而不影响全局名称空间和不必要地链接选择器？

为此，您可以使用

@if

语句：

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

@debug $foo; // undefined

---

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

因此这在Sass中不可用

Sass发行队列中有一张这样的罚单：

---

但是它要到Sass 4.0才能实现。

虽然这阻止了内联

@imports

，但我认为这是一个黑暗的模式，因为它暗中鼓励复杂的特殊性

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

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

---

@if

技术也污染了全局范围：当然，但这也会发生在mixin中。理想情况下，您真正的全局变量不会被命名为您可能在其他地方重用的名称。如果我被迫为局部变量使用唯一的名称，那么使用

@if（true）是没有意义的

首先是技巧：（

$height

全局变量的作用是什么？我尽可能具体地命名所有全局变量（

$logo width

，

$icon width

，等等），然后对我不在乎被覆盖或破坏的变量使用简洁的名称（

$w

，

$h

，等等）.你说得对，西曼农.我只是在找一个干净的解决办法。

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

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