node-sassを使ったSassの導入方法

本ページには広告が含まれます。

GUIコンパイラでSassをコンパイルすることも可能ですが、仕様がツールに依存してしまうため、細かい設定を行うような場合にはコマンドラインを利用したコンパイルがおすすめです。

方法は色々とありますが、今回は最も一般的なNode.jsで動く「node-sass」を使ったSassの導入方法をご紹介したいと思います。

INDEX

node-sassの導入方法
- Node.jsのインストール
- node-sassのインストール
Sassをコンパイルする
まとめ

node-sassの導入方法

これから始めるという方はGUIコンパイラの方が分かりやすく、使いやすいのでおすすめですが、細かい設定を行いたい場合はnode-sassを利用した方が柔軟な設定を行うことができます。そんな方に向けて、node-sassの導入方法をご紹介しておきます。

Node.jsのインストール

まずはnode-sassを利用するためにNode.jsをPCにインストールする必要があります。

homebrew、nodebrewを使ってNode.jsのバージョン管理を行う方法もありますが、Sassのコンパイルのみでしか利用しない方は公式サイトからファイルをダウンロードしてインストールするのが簡単なのでおすすめです。

LTSとCurrentの2つのバージョンがありますが、安定いているLTSの方をインストールしておきましょう。

インストールが完了したら、Windowsの場合は「コマンドプロンプト」、Macの場合は「ターミナル」を起動して、下記のコマンドを入力してみて下さい。

node -v

ここで、「v8.9.4」のようにバージョンが表示されたら無事にインストールが完了しています。

node-sassのインストール

Node.jsがインストールできたら、いよいよ次はnode-sassのインストールです。

コマンドプロンプト、ターミナルで次のように入力して下さい。

npm install -g node-sass

するとインストールが始まります。インストールが完了したら、次のコマンドを入力してみて下さい。無事にnode-sassのインストールが完了していたら、node-sassのバージョンが表示されます。

node-sass -v

Sassをコンパイルする

無事にnode-sassのインストールが完了したら、いよいよコンパイルを試してみましょう。

まずは、scssファイルを用意します。まだscssファイルを持っていない方は、次のテキストをテキストエディタなどにコピーして、「style.scss」のような名前で保存してみて下さい。

button {
  background: #FF0000;
  &.blue {
    background: #0000FF;
  }
}

保存できたら、scssファイルが保存されているディレクトリに移動して、下記のコマンドを実行してみましょう。

node-sass style.scss result.css --output-style expanded

これで、上手くいけばsytle.scssと同じディレクトリにresult.cssというファイルが生成されています。result.cssの中身は次のようになります。

button {
  background: #FF0000;
}

button.blue {
  background: #0000FF;
}

ちなみに、一番後ろに「–output-style expanded」をつけると整形された状態でCSSファイルが作られます。「–output-style compressed」とすると圧縮された状態で出力されるので、本番環境にアップロードする際などは圧縮して出力すると、読み込み速度の改善につながります。