css - Sass: @import の後に (同じ行に) コメントを付けられないのはなぜですか?

Question

@import "foo" // Bar

...結果はInvalid CSS after ""foo" ": expected media query list, was "// Bar". なんで？

説明ありがとう。

Answer 1

1. CSS 仕様では、@import ルールを次のように定義しています。

   <import-rule> = @import [ <url> | <string> ] <media-query-list>? ;
   

   これは@import、文字列または URL が続き、その後にオプションのメディア タイプのリストが続くことを意味します。

2. Sass シンタックスでは、コメントは独自の行に記述する必要があります

   インデントされた構文の他のすべてと同様に、コメントは行ベースです。これは、SCSS と同じようには機能しないことを意味します。それらは行全体を占める必要があり、その下にネストされたすべてのテキストも包含します。

パーサーは、メディア タイプのリストを期待し、コンテンツとチョークが混在するコメントを見つけます。

コメントとコンテンツを Sass 構文で分割する必要があります。

 // Bar
 @import "foo"

Answer 2

あなたが試すことができます

@import "foo"; // Bar

実際には、変数宣言の後にセミコロンがありません。