notes/node_modules/stylelint-scss/src/rules/percent-placeholder-pattern/README.md

1.0 KiB

percent-placeholder-pattern

Specify a pattern for %-placeholders.

    %foobar { display: flex; }
/** ↑
 * The pattern of this */

Options

regex or string

A string will be translated into a RegExp like so new RegExp(yourString) — so be sure to escape properly.

Nested selectors will be resolved before checking.

The selector value after % will be checked. No need to include % in your pattern.

E.g. /^foo-[a-z]+$/

The following patterns are considered warnings:

%myriad { display: flex; }
%foo-bar { 
  &-supa { display: flex; } /* %foo-bar matches, but %foo-bar-supa doesn't */
}
%foo- { /* %foo- on the 1st leves doesn't match */
  &bar { display: flex; }
}

The following patterns are not considered warnings:

%foo-aimp { display: flex; }
%foo-bar { 
  &lignt { display: flex; }
}
.p {
  @extend %mathy; // The rule only checks placeholder definitions
}