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:

// ❌ Expected a placeholder selector (e.g. %placeholder) to be used in @extend  scss/at-extend-no-missing-placeholder

.button {
  min-width: 80px;
  margin: 0;
}

.button-lg {
  @extend .button;
  width: 100%;
}

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

// ✅

%button {
  min-width: 80px;
  margin: 0;
}

.button {
  @extend %button;
}

.button-lg {
  @extend %button;
  width: 100%;
}