ツレのWebサイトの仕事を手伝ったときにSASSで嵌まった。とても単純でまたどうせ嵌まりそうなので、自戒の意味でメモしておく。
Sass: Syntactically Awesome Style Sheets
まずはSASSのコード
#wrapper
margin: 0
padding: 0
width: 960px
height: auto
これをCSSにコンパイルするとエラーになる。こちらはインデントにタブと空白を混じっていたのが原因だった。CSSからSASS型式で逆変換したときにタブが入ったCSSをコピペしたときの原因。サイトのサンプルからコピペしてもタブが入っているのでこれも注意。結果的には何かエラーがあるとしたら、インデントの書き方が悪いとか、プロパティと値のコロン（；）の間の空白を疑うこと。
Successfully generated CSS： ・・・・・・・
となって今度はうまく行くと思っていたけど、正しく指定されたスタイルシートで表示してくれない。SASSのコードが間違えていると思ってドキュメントを見直したけど正しい。他のサイトを見たけどこれといった誤りもない。
しかしながら、「これからはスタイルシートをCSSではなくてSASSスタイルで書こう」とい言いながら、SCCSスタイルでサンプルを書いているサイトがなんて多いことか。これは関係ない話し・・・。
出力されたCSSファイルを見てみると、margin-paddingとかおかしなプロパティに変換されていた。
#wrapper {
margin: 0;
margin-padding: 0;
width: 960px;
height: auto;
}
こちらもタブがまだ残っていたのが原因だった。このようにエラーなく変換されているのは、SASSの仕様上何かあるのだろうか？
使っているエディタはVisual Studio Codeだが、良いか悪いかわからないけどタブを入力すると自動的に空白にしてくれる。ただし、他のコードからコピー＆ペーストしたときはタブはそのままになってしまうので注意が必要である。VS Codeでタブと空白を区別してくれる表示の方法がどこかにあるのだろうな。秀丸エディタならあった。
それにしてもSASSは楽チンだな。今までLESSを使ってたけど、直接CSSを書く気にはなれないな。
と書いたら、SCCSスタイルの方がSASSスタイルの後に出てきたとか記事が出てきた。今までのCSSのように{}で囲むからタブとか空白でコンパイルエラーがなさそうだし、SCCSスタイルの方がいいのかな？
追記
SCSSスタイルで書くようになったら、上記のスペースとかタブの問題が出てこなくて楽ちんになった。ということで、SASSスタイルをやめて、SCSSスタイルで書くようにしています。