tanatiyo しょーごさんのコーディング課題【中級】からはSassを使ったコーディングに取り組んでいます。実際にSassを導入するまでに悩んだこと、解決した方法というのをざっくり( ..)φメモにしておこうと思いますので、もし同じように悩んでいる方が以下のことに気づいて解決できたら幸いです。
①ディレクトリ構成が悩む、難しい
→私は書籍「現場のプロから学ぶCSSコーディングバイブル」としょーごさんのyoutube動画を参考に、まずはimg,js,sass,css,index.htmlを作りました。↓
②複数のscssファイルを紐づけてコンパイルできない壁
→メンバー（変数、mixin、関数）はカプセル化されるので、グローバルに使うことが出来ない。名前空間という概念を知り、使い方が分かる
③複数の変数ファイルと複数のmixinファイルの管理（扱う変数やmixinの管理が増えてきたら？という疑問から調べてみました）
→一つのSassファイル（例えば「_tools.scss」として）にまとめることで、使いたいscssファイル内に記述する時も楽になる
→そこまで規模が大きくなければ一つのファイルにmixinと変数をまとめて管理し、参照先のファイルで名前空間を明示的に設定（例「@use “variables” as v;」）すれば、呼び出すときも簡単（例「color: v.$primary-color;」）にかける（記述量が減る）
④一応、一通りsassファイルにコードを書き始めるのが、コードを書いている途中で自動でコンパイルされていない→なぜ？
→Preprosの「Logs」というタブをクリックすると、エラーメッセージが表示されている
→これをクリアして「File Processed」と表示されれば（クリアするためにはエラー内容をよく読んで内容を確かめる必要があります。英語表記ですが、Webで翻訳したりすれば大体の意味は分かるかと。。。その上で、変数が定義されてなかったら変数を定義したり、スペルが間違っていないか確認したり、ファイル同士の紐づけのルールがされていなければ「＠useなど」正しく紐づけしたりという作業を行います。どのファイル名の何行目にエラーが出ているかも教えてくれるのでエラー箇所は比較的見つけやすいかと思います）、コンパイルされることに気づく
→「File Processed」と表示されても思うようにCSSが判定されていなければ、CSSファイルを開いてまずはコンパイルされた後の表示を確認。ここで反映されていなければ、Sassファイル側に何か不具合があると分かります。反映されていれば、Sassで書いたコードが思った通りの指定でCSSファイルに反映されていない場合がある。書き方（私は特にセレクタの指定の間違いが多かったです）に問題があれば、Saasファイルの方を修正する。
→（CSSにはSassで書いたコードが正しく反映されていても）それでも意図した通りに反映されていなければ、CSSのみでコーディングしていた時と同じようなバグを起こしている可能性があるので、例えばクラス名にスペルミスがないか確認したり、デベロッパーツールを用いてなぜ反映されていないかを確認したりする。
以上です。
Saasを書き始めた最初の辺りにつまずくことを書き連ねてみました。
とりあえず、作りながらまた気づいたことがあれば記事にしてみようと思います。