SCSSのおかげでコーディング速度が1.5倍になった件について【後編その3】

SCSSが使えるようになりコーディング速度、保守性が爆上がりした件についてテンションが上がっている私ですが前回は変数や応用の@mixinについてご紹介しました。

今回は実際にSCSSを使用する時の環境や、方法をご紹介できればと思います。

SCSSの実際の使い方

使えると便利なSCSSですがいざ拡張子.scssのファイル内にコードを書いて、そのまま表示できるかと言われればそうは問屋が卸さないんですね。

HTMLから読み取り実際にスタイルを適用できるのは拡張子が.cssファイルのみ。

そうなってしまうと、せっかくSCSSにファイルに書いた膨大なコードが無駄になるの！？と思ったそこのあなた！安心してください。ちゃんと方法はございます。それが「コンパイラ」。これを使うことによりSCSSに記述したファイルを自動でCSSに変換してくれるのです。

コンパイラとは・・・

コンパイラとは、コンピュータ・プログラミング言語の処理系の一種で、高水準言語（今回だとSCSS）によるソースコードから、元のプログラムよりも低い水準のコード（今回だと）に変換するプログラムである。

さて、コンパイルをするという事は環境構築を行わなければなりません。
環境構築と言うとパスを設定したり数あるエラーをくぐり抜けて・・・
あの面倒くさい作業です。。。

ですので今回は割りと簡単に出来るコンパイラの環境構築方法をご紹介しようと思います

環境構築：VS code編

使ってる方も多いと思われるテキストエディタ「VS code」。
このエディタを使うと簡単に環境構築ができてしまいます。

まずVS codeのプラグイン『Live Sass Compiler』をインストールします。

手順は以下の通り

1.VSCodeの拡張機能のメニューを開く
2.プラグイン『Live Sass Compiler』を検索する
3.プラグインのインストールを実行する

プラグイン『Live Sass Compiler』の使い方

コンパイルの監視を開始する

コンパイルの監視は、Live Sass Compilerのインストール後にVSCodeの画面下部に追加される【Watch Sass】というボタンをクリックするとスタートさせる事が出来ます。

【Watch Sass】のボタンをクリックするとボタンの状態が「Watching..」といった様に変わります。以降は「Watching..」の状態でSCSSファイル(.scss)を作成したり内容を変更すると、都度コンパイルが実行される様になります。

この状態でSCSSファイルへコードを書いていき保存をすると自動にCSSファイルへと変換されるという仕組みです。

いかがでしたでしょうか？
使えると便利になるSCSSは導入コストが多少あるかと思いますがそれの見返りは絶大な生産性を生みます。皆さんも是非SCSSを使いこなし快適なコーディングライフを過ごしましょう！