VSCODE(mac版）でSCSSを使う！

使い始めるとその便利さがたまらないSCSS(SASS)。
変数や関数もだけど、ネストできるだけでもめっちゃ便利で快適コーディングが実現できます。

今回、そのsassをvscodeで使用するにあたり色々苦労したので、自省としてまとめておきます。大きく３つに分けて掲載します。

さらに、その高い利便性を実現している要素の一つに、SCSSのファイルを分割して管理できる機能があります（いわゆるパーシャルでの管理、編集）。

上図のscssファイルを御覧ください。
htmlファイルやcssやimageフォルダに加えて、scssフォルダがあることが分かると思います。

そして、そのscssファイルには、style.scssというメインファイルに加え、abstractsフォルダやlayoutフォルダにいくつかのサブscssファイルを作成しています。

ではそのメインファイルとサブファイルはどのような関係なっているのでしょうか。

なんと！メインファイルは、サブファイルを読み込むだけです。

例えば、上図最下部の以下コードは、「pagesフォルダを読み込んでください」という意味です。

@forward "pages";

さらに、「フォルダを読み込んで」と設定した場合は自動的に_index.scssを読み込む仕組みになっています。ほな、pagesフォルダの_index.scssを見てみましょ。

そう、実はこのファイルも読み込むだけのコード。この_index.scssは同フォルダ内のheader.scss, top.scss, footer.scssを読み込んでいます。そしてそれらのファイルは、下図のようにばっちしscssで記述がされています。

このscssが先程の_index.scssに読み込まれているわけです。

ここまでをまとめると、pageフォルダ内の_header.scssは、同フォルダの_index.scssに読み込まれ、その_index.scssはstyle.scssに読み込まれるということです。

フォルダ構造とファイル同士の紐付けはこのようになされています。

さて、実際に作業するにあたり困るのはその紐付けのコーディング方法。

ファイルの読み込みでは、@forwardっていうコード（クエリ）を使っていましたね。

それらの詳しい話は以下のWebページに説明されています。参考になさってください。

以上、将来の私へのメモ書きでした。