本文へスキップ

at-rule-empty-line-before

at-rule の前に空行を必須または禁止します。

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

このルールは、以下のものを無視します。

  • ソースコードの最初のノードである at-rule
  • Less の `@import`。

fix オプション を使用すると、このルールによって報告された問題をすべて自動的に修正できます。

オプション​

string: "always"|"never"

"always"​

at-rule の前には常に空行が必要です。

次のパターンは問題と見なされます。

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

次のパターンは問題と見なされません。

a {}

@media {}

"never"​

at-rule の前に空行があってはなりません。

次のパターンは問題と見なされます。

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-rule について、主要なオプションを反転します。

つまり、名前で at-rule をグループ化できます。

たとえば、"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-rule について、主要なオプションを反転します。

たとえば、"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-rule について、主要なオプションを反転します。

つまり、名前でブロックレス at-rule をグループ化できます。

共有行のコメントはこのオプションに影響しません。

たとえば、"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-rule について、主要なオプションを反転します。

共有行のコメントはこのオプションに影響しません。

たとえば、"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-rule について、主要なオプションを反転します。

たとえば、"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-rule を無視します。

共有行のコメントはこのオプションをトリガーしません。

次のパターンは問題と見なされません。

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

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

@media {}

"first-nested"​

ネストされていて、親ノードの最初の子である at-rule を無視します。

たとえば、"always" の場合

次のパターンは問題と見なされません。

@supports {
  @media {}

  @media {}
}

"inside-block"​

ブロック内にある at-rule を無視します。

たとえば、"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-rule を無視します。

つまり、名前でブロックレス at-rule をグループ化できます。

たとえば、"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-rule を無視します。

たとえば、"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-rule を無視します。

たとえば、"always" の場合。

以下の場合

["import"]

次のパターンは問題と見なされません。

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