at-rule-empty-line-before
要求或不允许 at 规则前有空行。
¥Require or disallow an empty line before at-rules.
a {}
/* ← */
@media {} /* ↑ */
/** ↑
* This line */
该规则忽略了:
¥This rule ignores:
-
at 规则是源中的第一个节点
¥at-rules that are the very first node in the source
-
@charset
规则¥the
@charset
rule -
Less 中的
@import
¥
@import
in Less
fix
选项 可以自动修复此规则报告的所有问题。
¥The fix
option can automatically fix all of the problems reported by this rule.
选项
¥Options
"always"
at 规则之前必须始终有一个空行。
¥There must always be an empty line before at-rules.
{
"at-rule-empty-line-before": "always"
}
以下模式被视为问题:
¥The following patterns are considered problems:
a {} @media {}
a {}
@media {}
以下模式不被视为问题:
¥The following patterns are not considered problems:
a {}
@media {}
"never"
at 规则之前绝不能有空行。
¥There must never be an empty line before at-rules.
{
"at-rule-empty-line-before": "never"
}
以下模式被视为问题:
¥The following patterns are considered problems:
a {}
@media {}
以下模式不被视为问题:
¥The following patterns are not considered problems:
a {} @media {}
a {}
@media {}
可选的辅助选项
¥Optional secondary options
except
{ "except": ["array", "of", "options"] }
"after-same-name"
反转另一个同名 at 规则后面的 at 规则的主要选项。
¥Reverse the primary option for at-rules that follow another at-rule with the same name.
这意味着你可以按名称对 at 规则进行分组。
¥This means that you can group your at-rules by name.
鉴于:
¥Given:
{
"at-rule-empty-line-before": ["always", { "except": ["after-same-name"] }]
}
以下模式不被视为问题:
¥The following patterns are not considered problems:
@import url(x.css);
@import url(y.css);
@media (min-width: 100px) {}
@media (min-width: 200px) {}
a {
@extends .foo;
@extends .bar;
@include x;
@include y {}
}
"inside-block"
反转块内 at 规则的主要选项。
¥Reverse the primary option for at-rules that are inside a block.
鉴于:
¥Given:
{
"at-rule-empty-line-before": ["always", { "except": ["inside-block"] }]
}
以下模式被视为问题:
¥The following patterns are considered problems:
a {
@extend foo;
color: pink;
}
b {
color: pink;
@extend foo;
}
以下模式不被视为问题:
¥The following patterns are not considered problems:
a {
@extend foo;
color: pink;
}
b {
color: pink;
@extend foo;
}
"blockless-after-same-name-blockless"
反转遵循另一个同名无块 at 规则的无块 at 规则的主要选项。
¥Reverse the primary option for blockless at-rules that follow another blockless at-rule with the same name.
这意味着你可以按名称对无块 at 规则进行分组。
¥This means that you can group your blockless at-rules by name.
共享行注释不影响此选项。
¥Shared-line comments do not affect this option.
鉴于:
¥Given:
{
"at-rule-empty-line-before": [
"always",
{ "except": ["blockless-after-same-name-blockless"] }
]
}
以下模式不被视为问题:
¥The following patterns are not considered problems:
@import url(x.css);
@import url(y.css);
@namespace svg url('http://www.w3.org/2000/svg');
@import url(x.css); /* comment */
@import url(y.css);
@namespace svg url('http://www.w3.org/2000/svg');
a {
@extends .foo;
@extends .bar;
@include loop;
@include doo;
}
"blockless-after-blockless"
反转遵循另一个无块 at 规则的无块 at 规则的主要选项。
¥Reverse the primary option for blockless at-rules that follow another blockless at-rule.
共享行注释不影响此选项。
¥Shared-line comments do not affect this option.
鉴于:
¥Given:
{
"at-rule-empty-line-before": [
"always",
{ "except": ["blockless-after-blockless"] }
]
}
以下模式被视为问题:
¥The following patterns are considered problems:
@import url(x.css);
@import url(y.css);
@media print {}
以下模式不被视为问题:
¥The following patterns are not considered problems:
@import url(x.css);
@import url(y.css);
@media print {}
@import url(x.css); /* comment */
@import url(y.css);
@media print {}
"first-nested"
反转嵌套的 at 规则及其父节点的第一个子节点的主要选项。
¥Reverse the primary option for at-rules that are nested and the first child of their parent node.
鉴于:
¥Given:
{
"at-rule-empty-line-before": ["always", { "except": ["first-nested"] }]
}
以下模式被视为问题:
¥The following patterns are considered problems:
a {
@extend foo;
color: pink;
}
b {
color: pink;
@extend foo;
}
以下模式不被视为问题:
¥The following patterns are not considered problems:
a {
@extend foo;
color: pink;
}
b {
color: pink;
@extend foo;
}
ignore
{ "ignore": ["array", "of", "options"] }
"after-comment"
忽略注释后面的 at 规则。
¥Ignore at-rules that follow a comment.
共享行注释不会触发此选项。
¥Shared-line comments do not trigger this option.
鉴于:
¥Given:
{
"at-rule-empty-line-before": ["always", { "ignore": ["after-comment"] }]
}
以下模式不被视为问题:
¥The following patterns are not considered problems:
/* comment */
@media {}
/* comment */
@media {}
@media {} /* comment */
@media {}
"first-nested"
忽略嵌套的 at 规则及其父节点的第一个子节点。
¥Ignore at-rules that are nested and the first child of their parent node.
鉴于:
¥Given:
{
"at-rule-empty-line-before": ["always", { "ignore": ["first-nested"] }]
}
以下模式不被视为问题:
¥The following patterns are not considered problems:
@supports {
@media {}
@media {}
}
"inside-block"
忽略块内的 at 规则。
¥Ignore at-rules that are inside a block.
鉴于:
¥Given:
{
"at-rule-empty-line-before": ["always", { "ignore": ["inside-block"] }]
}
以下模式不被视为问题:
¥The following patterns are not considered problems:
a {
@extend foo;
color: pink;
}
a {
@extend foo;
color: pink;
}
b {
color: pink;
@extend foo;
}
b {
color: pink;
@extend foo;
}
"blockless-after-same-name-blockless"
忽略另一个同名无块 at 规则后面的无块 at 规则。
¥Ignore blockless at-rules that follow another blockless at-rule with the same name.
这意味着你可以按名称对无块 at 规则进行分组。
¥This means that you can group your blockless at-rules by name.
鉴于:
¥Given:
{
"at-rule-empty-line-before": [
"always",
{ "ignore": ["blockless-after-same-name-blockless"] }
]
}
以下模式不被视为问题:
¥The following patterns are not considered problems:
@import url(x.css);
@import url(y.css);
@namespace svg url('http://www.w3.org/2000/svg');
a {
@extends .foo;
@extends .bar;
@include loop;
@include doo;
}
"blockless-after-blockless"
忽略跟随另一个无块 at 规则的无块 at 规则。
¥Ignore blockless at-rules that follow another blockless at-rule.
鉴于:
¥Given:
{
"at-rule-empty-line-before": [
"always",
{ "ignore": ["blockless-after-blockless"] }
]
}
以下模式不被视为问题:
¥The following patterns are not considered problems:
@import url(x.css);
@import url(y.css);
@media print {}
@import url(x.css);
@import url(y.css);
@media print {}
ignoreAtRules
{ "ignoreAtRules": ["array", "of", "at-rules", "/regex/"] }
忽略指定的 at 规则。
¥Ignore specified at-rules.
鉴于:
¥Given:
{
"at-rule-empty-line-before": [
"always",
{ "ignoreAtRules": ["namespace", "/^my-/"] }
]
}
以下模式不被视为问题:
¥The following patterns are not considered problems:
@import "foo.css";
@namespace svg url('http://www.w3.org/2000/svg');
a {}
@my-at-rule {}