SASS中@ extension -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占位符

Answer 1

你没有。嵌套只为变量(从Sass 3.3开始)或mixins提供作用域，而不是选择器。占位符类与其他类一样，除了它的名字没有在编译后的CSS中输出的部分。

如果这种行为是必需的，那么你就只能使用mixins(它可以扩展所需的选择器)

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