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

Answer 1

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

如果需要这种行为，那么你就会使用mixin（它可以反过来扩展所需的选择器）卡住了

%foo {
  color: red;
}

.main {

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

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

}

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

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

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

2 个答案: