ビジネスとIT活用に役立つブログBlog


Sassの利用環境を構築しよう!gulpを使ってCSSにコンパイルする手順を解説

この記事をシェアする:

CSSをより効率的に記述する、Sass(サス)という言語ですが、Sass自体はブラウザで読み取ることができません。
今回はWindows10で、SassをCSSに変換(コンパイル)するための環境構築手順をご紹介します。

過去にDreamweaverでSassのコンパイルを取り扱った記事もありますので、Dreamweaverを使用している方はこちらも参考にしてみてください。

Node.jsのインストール

まずNode.jsをインストールしましょう。
ブラウザでNode.jsの公式サイトにアクセスしインストーラをダウンロードします。

ダウンロードできたらインストーラを起動し、インストールしていきます。


ダウンロードできたらインストーラを起動し、インストールしていきます。
「Next」を選択してインストールを進めましょう。


無事インストールが完了したらコマンドプロンプトを開きnode.jsのバージョンを確認してみましょう。

上記コマンドを入力し、バージョン情報が出れば無事にインストールされています。

コンパイルするための環境を構築

package.jsonの作成

今回はデスクトップに「test」というフォルダを作成し環境を作成してみましょう。 コマンドプロンプトで該当フォルダに移動し、下記コマンドを入力してpackage.jsonを作成します。

これで「test」フォルダ内にpackage.jsonが作成作成されました。

gulpとgulp-sassのインストール

次にgulpをインストールします。
gulpとはタスクランナーと呼ばれるツールの一つで、さまざまな処理(タスク)を自動で行ってくれます。

タスクの記述はJavaScriptで記述します。
下記コマンドをコマンドプロンプトで入力しgulpをインストールしましょう。

また、SassでCSSにコンパイルするために、gulp-sassをインストールします。

gulpfile.jsの作成

最後にgulpfile.jsを作成しタスクを書いていきます。

上記を記述したJavaScriptを「gulpfile.js」という名前で該当フォルダ内に保存します。
これは「gulpとgulp-sassを読み込み、『sass』ディレクトリ内にある.scssファイルを『css』ディレクトリ内にコンパイルする」というタスクになります。

これでCSSにコンパイル出来るようになりました。

CSSにコンパイルしてみよう

では実際にSassを使ってCSSファイルにコンパイルしてみます。
「sass」ディレクトリに「sample.scss」というサンプルファイルを作成しました。

次にコマンドプロンプトで下記コマンドを入力します。

「css」ディレクトリ内に「sample.css」というファイルが生成されればコンパイル成功です。

自動コンパイル設定を追加

このままでもSassをコンパイル出来るようになったのですが、Sassを修正するたびにコンパイルを手動で行っていたら面倒です。
Sassファイルを保存したら自動でコンパイルしてくれるようにタスクを追加しましょう。

gulpfile.jsを開き、追加で下記コードを記述します。

その後、コマンドプロンプトで

と入力すれば自動でコンパイルしてくれるようになりました。
自動コンパイルを停止したいときは、コマンドプロンプト画面でctrl + cを押せば停止します。

さいごに

今回はSassを扱うための環境構築を解説しました。
環境構築がSassを始めるにあたっての一番の障壁と言われています。
この記事が少しでもSassを始める方の手助けになれば幸いです。


この記事のカテゴリ:

SNSで最新の情報を
受け取ることができます!