sass関連の環境構築
先日からウェブカツのHTML上級にあたる
宿題に取り掛かっており、今日は一日掛かりっきりでした。
正直、本編でざっと触れて、ボリュームや難易度を想像すると
そこまで難しいと思っていなかったので、軽い気持ちで
取り組み始めたところ、色々なところでハマってしまい、
想像していた以上に苦戦しています。
1.sassの環境構築
レスポンシブ対応のサイトを作るにあたり、
sassという、より保守性の高いcss記法を使い始めました。
sassは、それ自体の内容を編集しただけでは
ファイルの更新を自動で監視してくれるライブラリを
インストールして、ターミナルで実行する必要があります。
しかし、このインストールやコマンドの実行を行う為に
適切に設定作業を行う必要があり、一つでも間違えてしまうと
本来の設定と違う状態になり、sassが全く使えません。
また、正しい手順で行っていたとしても、
パソコンの環境毎では動かなかったりすることがあり、
追加のオプションをコマンドに含める必要もあったりします。
私の場合は、サンプルプログラムと自分で入れるプログラムを
似たような名前のフォルダにしてしまっていた為、作業の一部に
抜け漏れがあったせいか、なかなか正常に動いてくれませんでした。
そんなこんなであっという間に2時間が経過。
その後、画面の挙動を確認したり、CSSを変更した後の
画面の見え方や挙動を確認する作業に移ったのですが、
その後も何度か、変更を加えたファイルと、元々用意していた
サンプルファイルが混同して、変更が反映されたのかどうか
確認する作業の手間が結構かかりました。
2.sassのコンパイルが行われているか、常々確認する
これまでの製作・編集作業では、CSSが効いていないとしたら
真っ先に疑っていたのは、ブラウザのキャッシュが残っていて
それをクリアしているかどうかだったのですが、
今後は、sassの吐き出す先のファイルを正しく参照しているか、
そもそも、ネットワークは確実に繋がっていて、
sassのコンパイル作業自体が正しく行われているかどうか、
この辺りにしっかり意識を回す必要があると感じます。
あれもこれもと変更を試した末、何も効果が出なかった原因が
「sassのコンパイルが機能していない、エラーが出ている」
「自動コンパイル機能が何故か途中で止まっていた」
だったりすると、試した変更点を１から全部また一つ一つ
確認する戻り作業が発生してしまいます。
メディアクエリ、マップ変数なども一通り触りましたが、
実際にやってみると分からないことがかなり多いです。
とにかく書きまくって試行錯誤して覚えるしかないと感じます。
そんなこんなで、
・メニューボタンの非表示化
・回り込み要素による右側の余白対応
は、明日に持ち越しです。
一つ一つ確認して粘り強くやっていけば
必ず解決するはずなので、引き続き頑張ります
