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

Question

I thought the following SCSS would end in error when compiling:

.main {

  %abstract {
    color: red;
  }

  .main-element {
    @extend %abstract;
  }

}

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

While it actually compiles to:

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

Is there any way to make such placeholders not available ouside the scope , ie only available for children of .main ?

See http://sass-lang.com/documentation/file.SASS_REFERENCE.html#placeholders

Answer 1

You don't. Nesting only provides scope to variables (as of Sass 3.3) or mixins, not selectors. A placeholder class is the same as any other class, except for the part where its name is not output in the compiled CSS.

If this behavior is required, then you're stuck using mixins (which can, in turn extend the desired selector)

%foo {
  color: red;
}

.main {

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

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

}

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

Answer 2

You could also use @at-root

%abstract {
  color: red;
}

.main {

  .main-element {
    @extend %abstract;

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

output

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

or just move the placeholder outside specific main block

%abstract {
    color: red;
  }

.main {

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

.outside {
  @extend %abstract;
}