跳至主要内容

at-rule-empty-line-before

要求或禁止在 at-rules 之前使用空行。

a {}
          /* ← */
@media {} /* ↑ */
/**          ↑
 *   This line */

此规则忽略

  • 作为源代码中第一个节点的 at-rules
  • Less 中的 @import。

该 fix 选项 可以自动修复此规则报告的所有问题。

选项​

string: "always"|"never"

"always"​

在 at-rules 之前必须始终使用空行。

以下模式被视为问题

a {} @media {}
a {}
@media {}

以下模式不被视为问题

a {}

@media {}

"never"​

在 at-rules 之前绝不使用空行。

以下模式被视为问题

a {}

@media {}

以下模式不被视为问题

a {} @media {}
a {}
@media {}

可选的辅助选项​

except: ["after-same-name", "inside-block", "blockless-after-same-name-blockless", "blockless-after-blockless", "first-nested"]​

"after-same-name"​

对于在另一个具有相同名称的 at-rule 之后出现的 at-rules，反转主要选项。

这意味着您可以按名称对 at-rules 进行分组。

例如，使用 "always"

以下模式不被视为问题

@charset "UTF-8";

@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-rules，反转主要选项。

例如，使用 "always"

以下模式被视为问题

a {

  @extend foo;
  color: pink;
}

b {
  color: pink;

  @extend foo;
}

以下模式不被视为问题

a {
  @extend foo;
  color: pink;
}

b {
  color: pink;
  @extend foo;
}

"blockless-after-same-name-blockless"​

对于在另一个无块 at-rule 之后出现的无块 at-rules，反转主要选项。

这意味着您可以按名称对无块 at-rules 进行分组。

共享行注释不会影响此选项。

例如，使用 "always"

以下模式不被视为问题

@charset "UTF-8";

@import url(x.css);
@import url(y.css);
@charset "UTF-8";

@import url(x.css); /* comment */
@import url(y.css);
a {

  @extends .foo;
  @extends .bar;

  @include loop;
  @include doo;
}

"blockless-after-blockless"​

对于在另一个无块 at-rule 之后出现的无块 at-rules，反转主要选项。

共享行注释不会影响此选项。

例如，使用 "always"

以下模式被视为问题

@import url(x.css);

@import url(y.css);

@media print {}

以下模式不被视为问题

@import url(x.css);
@import url(y.css);

@media print {}
@import url(x.css); /* comment */
@import url(y.css);

@media print {}

"first-nested"​

对于嵌套且是其父节点的第一个子节点的 at-rules，反转主要选项。

例如，使用 "always"

以下模式被视为问题

a {

  @extend foo;
  color: pink;
}

b {
  color: pink;
  @extend foo;
}

以下模式不被视为问题

a {
  @extend foo;
  color: pink;
}

b {
  color: pink;

  @extend foo;
}

ignore: ["after-comment", "first-nested", "inside-block", "blockless-after-same-name-blockless", "blockless-after-blockless"]​

"after-comment"​

忽略在注释之后出现的 at-rules。

共享行注释不会触发此选项。

以下模式不被视为问题

/* comment */
@media {}
/* comment */

@media {}
@media {} /* comment */

@media {}

"first-nested"​

忽略嵌套且是其父节点的第一个子节点的 at-rules。

例如，使用 "always"

以下模式不被视为问题

@supports {
  @media {}

  @media {}
}

"inside-block"​

忽略位于块内的 at-rules。

例如，使用 "always"

以下模式不被视为问题

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-rule 之后出现的无块 at-rules。

这意味着您可以按名称对无块 at-rules 进行分组。

例如，使用 "always"

以下模式不被视为问题


@charset "UTF-8";

@import url(x.css);
@import url(y.css);
a {

  @extends .foo;
  @extends .bar;

  @include loop;
  @include doo;
}

"blockless-after-blockless"​

忽略在另一个无块 at-rule 之后出现的无块 at-rules。

例如，使用 "always"

以下模式不被视为问题

@import url(x.css);

@import url(y.css);

@media print {}
@import url(x.css);
@import url(y.css);

@media print {}

ignoreAtRules: ["array", "of", "at-rules"]​

忽略指定的 at-rules。

例如，使用 "always"。

给定

["import"]

以下模式不被视为问题

@charset "UTF-8";
@import {}