Sass初学者がSassMeister使った時の落とし穴
こんにちは！しうです^^
自主学習教材、デイトラday7の課題を行っていた時のことです。
SassMeisterを利用してSassの勉強をしよう！という課題でいきなりエラーが出て躓いてしまったので共有します...(´;ω;｀)
SassMeisterとは？
ブラウザ上でSassの動作確認ができるツールです
Sass、CSS、HTML、HTMLの出力をリアルタイムで確認できます
ウィンドウが足りない
SassとSassによる出力結果(CSS)、HTMLを同時に表示したいのにウィンドウ無いぞ？
というときはView>CSSとHTMLにチェックを入れてください
横並びにしたいときはHorizontal、縦並びに表示したいときはVerticalにチェックを入れます
{} や ; を入力するとなぜかエラー
お手本通りに入力したのに全然エラーだらけになりました。
これは記述文法の設定によるもので、Sass>SCSSにチェックを入れたら直りました
なぜエラーが発生していたのか？
Sassの書き方には2種類あって、Rubyのようにインデント形式で書いていく『SASS』スタイルと、CSSと同じようにカッコでくくる『SCSS』スタイルがあります。
SASS と SCSS の両者の違いをまとめると次のようになります。
- 記述方法が異なる
- 拡張子が異なる
⇒ SASS の拡張子：ファイル名.sass
⇒ SCSS の拡張子：ファイル名.scss
そもそもRubyに触れたことがない人がほとんどだとおもうのでインデント形式についてまとめておきます。
▽インデント形式
▽SCSSの形式
この文法の設定が適切にされていなかったのでエラーばっかりになっていたんですね(-_-;)
反省反省...
まとめ
- SassMeisterとは？ブラウザ上でSassの動作確認ができるツール
- ウィンドウ無いぞ？というときはView>CSSとHTMLにチェック
- SASS と SCSS の違いは
- 記述方法が異なる
- 拡張子が異なる
記述方法によってSass>SassかSCSSにチェックをいれないと文法エラー
