Skip to content

Latest commit

 

History

History
47 lines (37 loc) · 786 Bytes

File metadata and controls

47 lines (37 loc) · 786 Bytes

at-extend-no-missing-placeholder

Disallow at-extends (@extend) with missing placeholders.

Using a class selector with the @extend directive usually results in more generated CSS than when using a placeholder selector. Furthermore, Sass specifically introduced placeholder selectors in order to be used with @extend.

.foo {
  @extend %bar
//        ↑
// This is a placeholder selector
}

The following patterns are considered warnings:

p {
  @extend .some-class;
}
p {
  @extend #some-identifer;
}
p {
  @extend .blah-#{$dynamically_generated_name};
}

The following patterns are not considered warnings:

p {
  @extend %placeholder;
}
p {
  @extend #{$dynamically_generated_placeholder_name};
}