跳到主要內容

at-rule-empty-line-before

要求或禁止在 at 規則之前換空行。

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

此規則忽略

  • 來源中第一個節點的 at 規則
  • Less 中的 @import。

fix 選項 可以自動修正此規則報告的所有問題。

選項​

字串: "always"|"never"

"always"​

at 規則之前必須永遠換空行。

以下模式會被視為問題

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

以下模式不會被視為問題

a {}

@media {}

"never"​

at 規則之前永遠不能換空行。

以下模式會被視為問題

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 規則之後的 at 規則。

這表示您可以依名稱將 at 規則分組。

例如，使用 "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 規則的主要選項。

例如，使用 "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 規則的主要選項，這些規則遵循具有相同名稱的另一個區塊外 at 規則。

這表示您可以依名稱將區塊外 at 規則分組。

共用行註解不會影響此選項。

例如，使用 "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 規則的主要選項，這些規則遵循另一個區塊外 at 規則。

共用行註解不會影響此選項。

例如，使用 "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 規則的主要選項，這些規則是其父節點的第一個子節點。

例如，使用 "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 規則。

共用行註解不會觸發此選項。

以下模式不會被視為問題

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

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

@media {}

"first-nested"​

忽略嵌套 at 規則，這些規則是其父節點的第一個子節點。

例如，使用 "always"

以下模式不會被視為問題

@supports {
  @media {}

  @media {}
}

"inside-block"​

忽略區塊內的 at 規則。

例如，使用 "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 規則的區塊外 at 規則。

這表示您可以依名稱將區塊外 at 規則分組。

例如，使用 "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 規則的區塊外 at 規則。

例如，使用 "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 規則。

例如，使用 "always"。

給定

["import"]

以下模式不會被視為問題

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