SASS 中 @extend-only 选择器（占位符）的范围答案

【问题标题】：Scope of the @extend-only selectors (placeholders) in SASSSASS 中 @extend-only 选择器（占位符）的范围
【发布时间】：2014-07-07 16:03:36
【问题描述】：

我以为下面的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

【问题讨论】：

您刚刚在.main 中编写了一个仅适用于.main-element 和.outside 的占位符。也许我只是不明白。但是你能解释一下你想做什么吗？ jsfiddle.net/NicoO/xBkw9
@NicoO 我希望%abstract 占位符仅可用于.main 的子代。也就是说，由于.outside 不是.main 的孩子（而是兄弟），我希望编译器失败。
我认为你不能让编译器在这一点上抛出错误。也许有一个解决方案至少可以使用`@warn "Not to be used outside..."`，但我不确定如何实现它，即使它也不是解决问题的可靠方法。

标签： css scope sass extend placeholder

【解决方案1】：

你没有。嵌套只为变量（从 Sass 3.3 起）或 mixin 提供范围，而不是选择器。占位符类与任何其他类相同，除了在编译的 CSS 中不输出其名称的部分。

如果需要这种行为，那么您将无法使用 mixins（反过来可以扩展所需的选择器）

%foo {
  color: red;
}

.main {

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

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

}

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

【讨论】：

很好的解决方案，我不知道 mixins 在嵌套时是作用域。

【解决方案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;
}

【讨论】：