Sass初学者がSassMeister使った時の落とし穴

f:id:sea_world_42:20210113022605p:plain


こんにちは!しうです^^

 

自主学習教材、デイトラday7の課題を行っていた時のことです。

SassMeisterを利用してSassの勉強をしよう!という課題でいきなりエラーが出て躓いてしまったので共有します...(´;ω;`)

 

SassMeisterとは?

ブラウザ上でSassの動作確認ができるツールです

Sass、CSS、HTML、HTMLの出力をリアルタイムで確認できます

SassMeister

 

ウィンドウが足りない

 SassとSassによる出力結果(CSS)、HTMLを同時に表示したいのにウィンドウ無いぞ?

というときはView>CSSとHTMLにチェックを入れてください

横並びにしたいときはHorizontal、縦並びに表示したいときはVerticalにチェックを入れます

 

{} や ; を入力するとなぜかエラー

お手本通りに入力したのに全然エラーだらけになりました。

これは記述文法の設定によるもので、Sass>SCSSにチェックを入れたら直りました

 

 

なぜエラーが発生していたのか?

Sassの書き方には2種類あって、Rubyのようにインデント形式で書いていく『SASS』スタイルと、CSSと同じようにカッコでくくる『SCSS』スタイルがあります。


SASS と SCSS の両者の違いをまとめると次のようになります。

  • 記述方法が異なる
  • 拡張子が異なる

⇒ SASS の拡張子:ファイル名.sass
⇒ SCSS の拡張子:ファイル名.scss

 

そもそもRubyに触れたことがない人がほとんどだとおもうのでインデント形式についてまとめておきます。

 

▽インデント形式

f:id:sea_world_42:20210117015309p:plain

 

▽SCSSの形式 

f:id:sea_world_42:20210117015410p:plain

 

この文法の設定が適切にされていなかったのでエラーばっかりになっていたんですね(-_-;)

反省反省...

 

まとめ

  • SassMeisterとは?ブラウザ上でSassの動作確認ができるツール
  • ウィンドウ無いぞ?というときはView>CSSとHTMLにチェック
  • SASS と SCSS の違い
  1. 記述方法が異なる
  2. 拡張子が異なる

 記述方法によってSass>SassかSCSSにチェックをいれないと文法エラー

 

参考サイト:Sass、SASS、SCSSの違いについて | コーディングの外注・代行なら|コーディングパック