

sassって何?なんで使う方が良いの?
SASS(SCSS)って何?
scssはcssを効率的に記述する方法です。cssで書いても結果は同じで絶対にscssが必要って訳ではないです。
それでも覚えておく方が良いと思うのは、仕事を受ける時に新しくHPを作って欲しいという依頼より、修正や変更の依頼の方が圧倒的に多いと思います。修正・変更で自分が作ったサイトではない場合、コーディングした人がscssで書いている時にどうやって書けば良いか知っておくと仕事を受けれる幅が広がるのではないでしょうか?
sassの書き方は、sassとscssの書き方がありますが、scssの方が広く普及しているようです。
この記事はscssの書き方を紹介していきます。
SASS = Syntactically
Awesome
StyleSheets
の略です。
・Syntactically = 構文的に
・Awesome = 凄い、素晴らしい
・StyleSheets = スタイルシート
scssで書いたstyleがhtmlに反映される流れは、フォルダ構造によって少し省略されたりしますが以下のような流れになります。
1. 〇〇.scssに記入
2. index.scssで同じフォルダ内のscssファイルを読み込む(複数フォルダに分かれている場合)
3. style.scssで複数のフォルダを読み込む
4. コンパイルしてstyle.cssに変換
5.htmlで読み込むstyle.cssを読み込む


コンパイルとは?
scssのコンパイルとは、単純に言うとscssで記述したスタイルシートをcssに変換する事です。
左の画像のようにネスト(入れ子)で書いてコンパイルすると、右の画像のようにcssの書き方に変換したファイルを自動で作ってくれます。


@mediaを書く時も下左画像のようにプロパティと同じ場所に書けるので分かりやすいです。


コンパイルの方法
コンパイルの方法は何通りかあるみたいですが、自分はVSCodeの拡張機能を使ってコンパイルしているのでその方法を書きます。
① VSCodeの拡張機能のメニューを開く
② 検索入力で「 Live Sass Compiler 」(下の画像のアイコンです)
③ インストール
VSCode拡張機能「 Live Sass Compiller 」を使う

「 Live Sass Compiller 」使い方
Live Sass CompillerがインストールされているとVSCodeの下の方に表示される
「 Watch Sass 」クリックするだけです!
コンパイルされると、style.scssがあるところに

動いている時は「 Watching… 」と表示されています。

ファイルの作り方、使い方(フォルダ分け含む)

・ファイルの先頭に「 _ 」アンダーバーを付ける
例. 「 _〇〇.scss 」他のファイルを読み込む時(変数を定義してるファイルなど)は、ファイルの一番上に「@use “ ../フォルダ名 ” as *;」を記入して読み込む


・各フォルダごとに「 _index.scss 」を作る
index.scssの中に「 @forward “ 同じフォルダ内のscssファイル名 “; 」
「 _ 」と「 .scss 」は書かなくて大丈夫


・フォルダと同じ階層に「 style.scss 」を作る
style.scssの中に「 @use “ 読み込む各フォルダ名 “; 」
「style.scss」でのフォルダ読み込みも上から読み込みこむので、関数、変数、mixinの入ってるフォルダは上に書きましょう。複数のファイルで同じ場所に違ったstyleが付いている場合は、下に書かれてるフォルダのstyleが優先されます。