Expected a placeholder selector (e.g. %placeholder) to be used in @extend

To extend a ruleset, for example a base button and a larger variant, the following will generate a linting error:

1// ❌ Expected a placeholder selector (e.g. %placeholder) to be used in @extend  scss/at-extend-no-missing-placeholder
2
3.button {
4  min-width: 80px;
5  margin: 0;
6}
7
8.button-lg {
9  @extend .button;
10  width: 100%;
11}

To remedy this, create a placeholder ruleset (prefixing a name with %) which contains the desired style rules, then @extend as needed.

1// ✅
2
3%button {
4  min-width: 80px;
5  margin: 0;
6}
7
8.button {
9  @extend %button;
10}
11
12.button-lg {
13  @extend %button;
14  width: 100%;
15}

Expected a placeholder selector (e.g. %placeholder) to be used in @extend

Metadata