在SASS中，@extend-only选择器（占位符）的作用范围是什么？

Question

我认为下面的 SCSS 代码在编译时会出错：

.main {

  %abstract {
    color: red;
  }

  .main-element {
    @extend %abstract;
  }

}

.outside {
  @extend %abstract; // <-- 
}

实际上，它编译成：

.main .main-element, .main .outside {
  color: red;
}

有没有办法使这样的占位符在范围之外不可用，即仅在.main的子元素中可用？详情见http://sass-lang.com/documentation/file.SASS_REFERENCE.html#placeholders。

- sp00m

---

你刚刚写了一个占位符，它只能在.main内部的.main-element和.outside中使用。也许我不理解。但是你能解释一下你想做什么吗？http://jsfiddle.net/NicoO/xBkw9/ - Nico O

@NicoO 我希望%abstract占位符仅对.main的子元素可用。也就是说，由于.outside不是.main的子元素（而是兄弟元素），我希望编译器失败。 - sp00m

我认为你无法让编译器在这一点上抛出错误。也许有一个解决方案，至少可以使用@warn“不要在...之外使用”，但我不确定如何实现，即使是这样，它也不会是问题的可靠解决方案。 - Nico O

Answer 1

不需要。嵌套仅为变量（自Sass 3.3起）或mixin提供作用域，而不是选择器。占位符类与任何其他类相同，只是其名称不会在编译后的CSS中输出。

如果需要此行为，则必须使用mixin（可以进一步扩展所需的选择器）。

%foo {
  color: red;
}

.main {

  @mixin foo() {
    @extend %foo;
  }

  .main-element {
    @include foo();
  }

}

.outside {
  @include foo(); // <-- yep, it errors here
}

- cimmanon

---

很棒的解决方案，我不知道混合时嵌套的作用域。 - sp00m

Answer 2

您可以使用@at-root。

%abstract {
  color: red;
}

.main {

  .main-element {
    @extend %abstract;

    @at-root .outside {
      @extend %abstract;
    }
  }
}

输出

.main .main-element, .outside {
  color: red;
}

或者将占位符移出特定的主要块

%abstract {
    color: red;
  }

.main {

  .main-element {
    @extend %abstract;
  }
}

.outside {
  @extend %abstract;
}

- Vangel Tzo