前にも書いた気がするけど。
なんでSCSSか
楽だし早い。
階層にして書いていくことが基本なんで、他所とclass名が重複しても明確な棲み分けがしやすい。当然書き方によっては被ることもある。つまり、事故率が減るということ。
変数と関数が使える。変数というだけなら元々var()があるけど、cssの機能以上のことが組めるようになる。修正がだるいからあんまり凝ったことはしないけど。
ファイルをまとめられる。css内で他のcssファイルを読み込むことはできるけど、scssの機能だと書き出し時に指定したファイルを1つにまとめて書き出すことができる。編集ファイルの方で分けておけることが重要で、WEBサイト上では必要なものを読み込ませられるなら手段は問わないというか、ファイル数を少なくできる方に越したことがないし、読み込み速度向上とかSEO的なアレでも貢献できる。
色々あるけど、SCSSに慣れた頃にcssに戻って作業をするとストレスを感じる。そのくらいに便利ということだけで理由は十分だと思う。
なんでVSCodeか
無料だし動作が軽いから。
Dreamweaverが重くなったあたりで移った。DWが軽くなってたとしてもわざわざ戻る気が起きない。無料ソフトだからって、予備の立ち位置じゃなくて最前線で戦えるパフォーマンスを持ってるでしょうこれ。
そのままだと乏しい機能はあるけど拡張機能によりできる幅が広がる。言い換えたら必要な機能だけ入れとけば良いという話で、ソフトに無駄な機能、負荷をかけなくて済むというメリットが有る。
2010年代あたりのVisualStudioは重さを感じてたんだけどね、すごいね。
やっていく
VSCodeをインストールする。
「Live Sass Compiler」という、SCSS（Sass）を扱うための拡張機能を入れる。
WEBサイトとかはないのでVSCode上でインストールする。
拡張機能ID：glenn2223.live-sass
わからないなら、拡張機能名で検索したら紹介記事が出てくるのでそれを参照。
使っていく
ワークスペースの理解と用意
VSCodeのSCSSは「ワークスペース」を開いた状態でやっていくという前提がある。編集ファイルだけ開いてたとか、割りと忘れがちなので注意。
上部メニュー「編集」>「フォルダーを開く」で作業フォルダを開く。WEBサイトでいうルートに当たるところをひらけば大丈夫、もしくはcss用のフォルダ。
フォルダを開いたらワークスペースを開いたことになる。左メニュー「エクスプローラー」の中の「HTML（ワークスペース）」に指定したフォルダの内部がツリー状で表示されてたらOK。
別のワークスペースを開くとそれまでのワークスペースは閉じることになる。多少楽かな？というところに、ワークスペースをファイルとして保存できる機能がある。
上部メニュー「編集」＞「名前をつけてワークスペースを保存」からやっていく。デフォルトだと「【フォルダ名】.code-workspace」で作られる。これを上部メニュー「編集」＞「ファイルでワークスペースを開く」から読み込めば一発で復帰できるというやつ。
作ったファイルは保存した場所から指定した場所への相対パスが仕込まれてるので、つまり作ったあとにこのファイルを移動させるとリンク切れを起こしてワークスペースがひらけない。WEBサイト制作のファイル整理によりどうやっていくのが良いかは変わってくると思うんで、注意すること。
まあめんどくさかったら毎回フォルダのパスをコピペすればいいんですよ。複数サイトの編集をする時にあると楽だよねって話。
作っていく
SCSSファイルをVSCodeで開く。
VSCodeの一番下のところに「Watch Sass」というのがあるので、クリックして「Watching…」に変更する。
SCSSを編集して保存すると勝手にCSSを出力してくれる。「Watching…」が「Success」に変わるので分かりやすいですね。コンパイルには多少時間がかかるんで、保存したらちょっと待ってからWEBページを閲覧すると良い。コード量が多くなってきたときとかは特に、保存した直後だとまだファイルが完成してない事がよくある。
WEBサイトにアップする際は出力されたCSSファイルだけを使えば良い。一緒に作られる.css.mapは何かといえば、ブラウザの検証でstyleを確認する際に、SCSSのどの部分かが分かるようにするためのやつ。つまり、コーダーに嬉しいやつ。WEBサイトの閲覧自体にSCSSは全く関わらない。
ところで、VSCodeを再起動するとSCSSの拡張機能は「Watch Sass」に戻る。このままだとコンパイルされないので、毎度「Watching…」にする癖をつけること。
以上。
コメント