Visual Stadio CodeでSass(Scss)をコンパイルできるようにしてみる
2020/05/03※この記事にはPRが含まれています。
今さらですがSassを改めてやろうかなと思い、visual studio codeでSassをコンパイルするための環境を整備しました。
Sassですが、５年前くらいに勤めていた会社ですこしやっていました。
なので、久々のSassです！
いやでも、５年空いているので・・・もう、Sass初めましてかもしれません。。
以前、Sassを使っていた時は、あまり（というか全く）メリットを感じられなかったので、その後、Sassを積極的に取り入れることはしませんでした。
そんな私が、Sassを導入しようと思った話と、visual stadio codeでSassを使うための手順を紹介したいと思います。
もくじ
Sassとは
Sassは「Syntactically Awesome Style Sheets」の略になります。
訳すと「構造的に素晴らしいスタイルシート」という意味で、CSSを効率よく記述するための言語です。
Sassを導入しようと思ったきっかけ
冒頭にも書きましたが、以前Sassに触れた際には全くメリットが感じられずでした。
いまだに、Sassのメリットを見てみても、
「そんな変わるかな。。？」
「逆に、読み解くスピード遅くなりそうだけど・・・」
と思っています。
ですが、今から１年くらい前、夫が「Sass便利すぎる！」と話していたことをきっかけに、そこから少しだけSassやっといた方がいいかなーとは思いはじめていました。
なので、最近この自分のサイトも立ち上げたことだし、Sassを使用している会社もたくさんあるし、夫もなにやら絶賛？していたし・・・やっぱりやっておく必要はあるのかなと思い、今回やっと導入してみようと思いました。
Sassのメリットと私が思うメリットに対しての疑問点
Sassのメリットとしてよく挙げられているのは以下の２点かなと思います。
①作業効率がアップする
・ネスト（入れ子）が使えるため記述量が減るため
・mixinを使用して定義したスタイルを関数のように呼び出すことができるため、などなど
②メンテナンスが行いやすくなる
・変数が使用できるため共通のスタイルを一括で変更できるため
・ファイルを役割ごとに分割して管理できるため、などなど
メリットに対しての私の疑問点は
・クラスを階層で指定するときにネストを使うことで、親セレクタを書かなくていいから便利とはわかるのですが、親セレクタ書くことにそんなに時間を割かれるのかな？コピペするし…
・ネストってやりすぎると見にくくなるし、ほかの人が見たとき、読み解くのに時間がかかったりして、メンテナンス性は本当に良くなるのかな？
・変数やmixinの便利さは、デザインによるところが大きいから、似たようなパーツがそんなにないデザインのコーディングだと変数やmixinを使用することはあまりなくなるため、便利さを感じられにくいのではないのかな？
です。
でも、便利といっている人たちもいるので、まずは自分でしばらくやってみて試してみるしかメリットに対しての疑問は払拭されないですよね。
ということで、以下からはvisual studio codeを使ったSassのコンパイル方法です。
Visual Studio CodeでSassのコンパイル環境を整える手順
Visual Studio CodeでSassをコンパイルするには「Live Sass Compiler」という拡張機能をインストールする必要があります。
拡張機能をインストールするだけで簡単にSassのコンパイルができるようになります！
「Live Sass Compiler」のインストールは以下の手順で行うことができます。
１．Visual Studio Code（以下VS Code）を立ち上げます。
２．VS Codeを立ち上げると以下の画面が表示します。VS Codeの左にあるアイコン一覧にある一番下の「拡張機能」アイコンをクリックします。
３．拡張機能の検索ボックスで「Live Sass Compiler」と入力し、「Install」アイコンをクリックします。
以上で、VS CodeでSassをコンパイルできる環境が整いました。
動作確認
１．まず、任意の場所に<ファイル名>.scssファイルを作成します。
２．１で作成したscssファイルをVS Codeで開きます。
３．VS Code画面下にある「Watch Sass」をクリックします。
これをすることで.scssファイルが監視され、保存したときに自動でscssファイルがコンパイルされ、cssファイルが作成されます。
４．.scssファイルの拡張子前のファイル名と同じ名前の.cssファイルが作成されるか確認する。
例）test.scssをコンパイルするとtest.cssファイルが作成される
コンパイルエラーが出なければ、cssファイルが作成されていると思います。
「Live Sass Compiler」の設定で、CSSの出力先を特に指定していない場合は、scssファイルと同階層にcssファイルが作成されていると思います。
CSSの出力先を指定している場合には、指定したディレクトリにcssファイルが作成されているか確認してみてください。
コンパイルエラーが出た場合は、cssファイルが作成されなかったり、cssファイルが更新されていなかったりします。
エラーが出た場合は、内容を確認して対処してください。
最後に
これを機に、これからSassを使用してみて、いままで私がSassに対して思っていたことがどう変わっていくのか、Sassを使うメリットを実感できるのか試していきたいと思います。
そして、コーディングスキルも上がればいいなー。
オススメ記事
カテゴリー
プロフィール
popo
フリーランスでWEB制作業務を行っている３児（４歳、２歳、０歳、2020年時点）の母です。
WEBの勉強のためにブログをはじめました！
このブログは、主に私の育児備忘録のようなものになっています！
すべての頑張っているママパパたちに楽しんでもらえるような内容を目指し頑張ります！
