stylelint-use-nesting-scss
v4.0.3
Published
Enforce nesting when it is possible in SCSS
Downloads
187
Maintainers
Readme
Stylelint Use Nesting (SCSS fork)
Stylelint Use Nesting is a stylelint rule to enforce nesting when it is possible in CSS.
Usage
Add stylelint and Stylelint Use Nesting to your project.
npm install stylelint stylelint-use-nesting --save-dev
Add Stylelint Use Nesting to your stylelint configuration.
{
"plugins": [
"stylelint-use-nesting-scss"
],
"rules": {
"/use-nesting": "always" || "ignore"
}
}
Options
always
If the first option is "always"
or true
, then Stylelint Use Nesting
requires all nodes to be linted, and the following patterns are not
considered violations:
.example {
color: blue;
&:hover {
color: rebeccapurple;
}
}
.example {
color: blue;
@media (min-width: 640px) {
color: rebeccapurple;
}
}
While the following patterns are considered violations:
.example {
color: blue;
}
.example:hover {
color: rebeccapurple;
}
.example {
color: blue;
}
@media (min-width: 640px) {
.example {
color: rebeccapurple;
}
}
ignore
If the first option is "ignore"
or null
, then Stylelint Use Nesting does
nothing.
Secondary Options
except
The except
option ignores reporting or autofixing rules where the potentially
nesting portion of the selector matches a case-insensitive string or regular
expression.
{
"rules": {
"nesting/use-nesting": ["always", { "except": [':selection', /^:dir/i] }]
}
}
only
The except
option limits reporting and autofixing to rules where the
potentially nesting portion of the selector matches a case-insensitive string
or regular expression.
{
"rules": {
"nesting/use-nesting": ["always", { "only": ['.js', /^:(hover|focus)/i] }]
}
}