CSSのコーディングに欠かせないSassですが、記法が「SCSS構文」と「SASS構文」の2通りがあります。プロジェクトごとに指定がある場合にはそれに沿って対応するのですが、個人的にはSASS構文を好んで使います。そんな時にstylelintのシンタックスエラーで「Please check validity of the block starting from line」と指摘される場面がいくつかありました。   文法的にも特に問題なく書いているはずなのに、なぜ？という感じで、同じ内容をSCSS構文に置き換えてみるとエラーが出なくなるという謎な現象でした。色々調べて試しているうちに解消できたので、今回はそのエラーの対処法についてまとめてみたいと思います。   まず、今回のエラーの発生する前提条件ですが、DartSassでSASS構文を使ってスタイルシートを書いており、どうやら@useルールを使った直後に発生していたようです。そしてコンパイルには、webpackでsass-loaderを使っている状況でした。ただし全ての箇所ではなく、あくまで一部分ということでそれ以上は結局よくわかりませんでした、、   例を挙げると次のような箇所で、SCSS構文で書くとこのような形になり、@useルールで変数用のパーシャルファイルを読み込み、そのファイル名をネームスペースとして指定しています。そして、実際に変数を使用する際にネームスペースを併記して使っています。

@use "variable" as variable;
p {
  color: variable.$primary-color;
}

  このSCSS構文の場合にはstylelintエラーは発生しませんでした。そして、これをそのままSASS構文で記述するとこのような形になります。波括弧とセミコロンを省略できる書き方になります。

@use "variable" as variable
p
  color: variable.$primary-color

  この状態でコンパイルするとなぜか次のようなエラーが発生してしまいました。どうやら文法的に誤りがあるという指摘のようです。。

Please check validity of the block starting from line #〜 CssSyntaxError

  全く問題点がわからなかったのですが、よく調べてみるとどうやらSassを解析するためのパーサーに問題があるようで、SASS構文に対して@useルールに対応していない部分があるという情報が見つかりました。そこで対応策としてネームスペースにワイルドカードを指定し、変数のみで指定する方法に変えてあげることでエラーも解消しました。

@use "variable" as *
p
  color: $primary-color

  ちなみに、上記以外にも以下のように入れ子の状態でスタイルを何も記述しない状態でファイルの最終行となっている場合にも同じエラーが発生していました。

p
  margin: 0
  &:first-child

  この場合にはセレクタで終わらないよう削除するか、何かスタイルを入れるか、またコメントを入れるなどの対応が必要になります。  

---

  SASS構文はあまり人気がないようなので、この対応にも遅れる可能性があるとのこと、、個人的にはPugもよく使うのと、簡潔に記述できるということで気に入っているのですが、とりあえずエラーは解消できたので良しとしますか。。