max-nesting-depth
限制嵌套深度。
¥Limit the depth of nesting.
a { & > b { top: 0; } }
/** ↑
* This nesting */
此规则的工作原理是根据你指定的最大值检查规则 '和 at 规则' 实际 "嵌套深度"。嵌套深度的工作原理如下：
¥This rule works by checking rules' and at-rules' actual "nesting depth" against your specified max. Here's how nesting depths works:
a {
& b { /* nesting depth 1 */
& .foo { /* nesting depth 2 */
@media print { /* nesting depth 3 */
& .baz { /* nesting depth 4 */
color: pink;
}
}
}
}
}
[!NOTE] 根级 at-rules 将不包含在嵌套深度计算中，因为大多数用户会理所当然地认为根级 at-rules 是 "free"（因为有必要）。因此，以下两条
.foo规则的嵌套深度均为 2，因此如果max小于或等于 2，则将通过：¥[!NOTE] root-level at-rules will not be included in the nesting depth calculation, because most users would take for granted that root-level at-rules are "free" (because necessary). So both of the following
.foorules have a nesting depth of 2, and will therefore pass if yourmaxis less than or equal to 2:
a {
b { /* 1 */
.foo {} /* 2 */
}
}
@media print { /* ignored */
a {
b { /* 1 */
.foo {} /* 2 */
}
}
}
该规则将（现已弃用）插件 stylelint-statement-max-nesting-depth 的功能集成到 Stylelint 的核心中。
¥This rule integrates into Stylelint's core the functionality of the (now deprecated) plugin stylelint-statement-max-nesting-depth.
选项
¥Options
number
指定允许的最大嵌套深度。
¥Specify a maximum nesting depth allowed.
鉴于：
¥Given:
{
"max-nesting-depth": 2
}
以下模式被视为问题：
¥The following patterns are considered problems:
a {
& .foo { /* 1 */
&__foo { /* 2 */
& > .bar {} /* 3 */
}
}
}
a {
@media print { /* 1 */
& .foo { /* 2 */
& .bar {} /* 3 */
}
}
}
以下模式不被视为问题：
¥The following patterns are not considered problems:
a {
& .foo { /* 1 */
&__foo {} /* 2 */
}
}
a .foo__foo .bar .baz {}
@media print {
a {
& .foo { /* 1 */
&__foo {} /* 2 */
}
}
}
可选的辅助选项
¥Optional secondary options
ignore
{ "ignore": ["array", "of", "options"] }
"blockless-at-rules"
忽略仅封装其他规则且本身没有声明块的 at 规则。
¥Ignore at-rules that only wrap other rules, and do not themselves have declaration blocks.
鉴于：
¥Given:
{
"max-nesting-depth": [1, { "ignore": ["blockless-at-rules"] }]
}
以下模式被视为问题：
¥The following patterns are considered problems:
由于 at 规则有一个声明块。
¥As the at-rules have a declarations blocks.
a {
&:hover { /* 1 */
@media (min-width: 500px) { color: pink; } /* 2 */
}
}
a {
@nest > b { /* 1 */
.foo { color: pink; } /* 2 */
}
}
以下模式不被视为问题：
¥The following patterns are not considered problems:
因为以下所有 .foo 规则的嵌套深度都仅为 1。
¥As all of the following .foo rules would have a nesting depth of just 1.
a {
.foo { color: pink; } /* 1 */
}
@media print { /* ignored regardless of options */
a {
.foo { color: pink; } /* 1 */
}
}
a {
@media print { /* ignored because it's an at-rule without a declaration block of its own */
.foo { color: pink; } /* 1 */
}
}
"pseudo-classes"
忽略每个选择器列表项中的第一个选择器是伪类的规则
¥Ignore rules where the first selector in each selector list item is a pseudo-class
鉴于：
¥Given:
{
"max-nesting-depth": [1, { "ignore": ["pseudo-classes"] }]
}
以下模式被视为问题：
¥The following patterns are considered problems:
a {
b { /* 1 */
.c { /* 2 */
top: 0;
}
}
}
a {
&:hover { /* ignored */
b { /* 1 */
.c { /* 2 */
top: 0;
}
}
}
}
a {
b { /* 1 */
&::selection { /* 2 */
color: #64FFDA;
}
}
}
a {
b { /* 1 */
&:hover, .c { /* 2 */
top: 0;
}
}
}
以下模式不被视为问题：
¥The following patterns are not considered problems:
因为以下所有伪类规则的嵌套深度都仅为 1。
¥As all of the following pseudo-classes rules would have a nesting depth of just 1.
a {
b { /* 1 */
&:hover { /* ignored */
top: 0;
}
}
}
a {
b { /* 1 */
&:nest {
&:nest-lvl2 { /* ignored */
top: 0;
}
}
}
}
a {
&:hover { /* ignored */
b { /* 1 */
top: 0;
}
}
}
a {
&:nest { /* ignored */
&:nest-lvl2 { /* ignored */
top: 0;
b { /* 1 */
bottom: 0;
}
}
}
}
a {
b { /* 1 */
&:hover, &:focus { /* ignored */
top: 0;
}
}
}
ignoreAtRules
{ "ignoreAtRules": ["array", "of", "at-rules", "/regex/"] }
忽略指定的 at 规则。
¥Ignore the specified at-rules.
鉴于：
¥Given:
{
"max-nesting-depth": [1, { "ignoreAtRules": ["/^--my-/", "media"] }]
}
以下模式不被视为问题：
¥The following patterns are not considered problems:
a {
@media print { /* 1 */
b { /* 2 */
c { top: 0; } /* 3 */
}
}
}
a {
b { /* 1 */
@media print { /* 2 */
c { top: 0; } /* 3 */
}
}
}
a {
@--my-at-rule print { /* 1 */
b { /* 2 */
c { top: 0; } /* 3 */
}
}
}
a {
@--my-other-at-rule print { /* 1 */
b { /* 2 */
c { top: 0; } /* 3 */
}
}
}
以下模式被视为问题：
¥The following patterns are considered problems:
a {
@import print { /* 1 */
b { top: 0; } /* 2 */
}
}
a {
@--not-my-at-rule print { /* 1 */
b { top: 0; } /* 2 */
}
}
ignorePseudoClasses
{ "ignorePseudoClasses": ["array", "of", "pseudo-classes", "/regex/"] }
忽略指定的伪类。
¥Ignore the specified pseudo-classes.
鉴于：
¥Given:
{
"max-nesting-depth": [1, { "ignorePseudoClasses": ["hover", "^focus-"] }]
}
以下模式不被视为问题：
¥The following patterns are not considered problems:
a {
&:hover { /* ignored */
b { /* 1 */
top: 0;
}
}
}
a {
&:hover, &:active { /* ignored */
b { /* 1 */
top: 0;
}
}
}
以下模式被视为问题：
¥The following patterns are considered problems:
a {
&:visited { /* 1 */
b { /* 2 */
top: 0;
}
}
}
a {
&:hover, &:visited { /* 1 */
b { /* 2 */
top: 0;
}
}
}
ignoreRules
{ "ignoreRules": ["array", "of", "selectors", "/regex/"] }
忽略与指定选择器匹配的规则。
¥Ignore rules matching with the specified selectors.
鉴于：
¥Given:
{
"max-nesting-depth": [
1,
{ "ignoreRules": [".my-selector", "/^.ignored-sel/"] }
]
}
以下模式不被视为问题：
¥The following patterns are not considered problems:
a {
.my-selector { /* ignored */
b { /* 1 */
top: 0;
}
}
}
a {
.my-selector, .ignored-selector { /* ignored */
b { /* 1 */
top: 0;
}
}
}
以下模式被视为问题：
¥The following patterns are considered problems:
a {
.not-ignored-selector { /* 1 */
b { /* 2 */
top: 0;
}
}
}
a {
.my-selector, .not-ignored-selector { /* 1 */
b { /* 2 */
top: 0;
}
}
}