WindowsでSassが使える環境を構築する方法

Windows10でSassが使える環境を整える手順をご紹介いたします。

Sass(Syntactically Awesome StyleSheet)とは、より効率的にCSSが書けるように拡張されたCSSのメタ言語です。Sassを使えば、変数を利用して(変数は通常のCSSでも利用可能ですが)値を管理したり、セレクタを入れ子にしてコードの記述量を減らしたりすることが可能です。

一言でいうと、「すごいCSS」という感じです。(語彙力…)

Sassは便利な反面、利用できるようにするための環境構築が少し面倒だったり、少なからず学習コストがかかります。「便利なのはわかるけど、どうやって導入すればいいんだろう…」と思い、なかなか手を出せずにいる方も多いのではないでしょうか。

そんなわけで今回は、とりあえずSassを使えるようにするための環境構築について解説いたします。手順通り進めてもらえば、Sassが利用可能な環境の出来上がりです。

スポンサードリンク

ステップ1. Rubyのインストール

Sassを利用するためには、Rubyがインストールされている必要があります。

Macでは標準でインストールされていますが、Windowsでは自分でインストールしなければいけません。とはいっても非常に簡単です。

まずはRubyInstallerにアクセスして、[Download]ボタンをクリックします。

最新版のRubyをダウンロードします。64bit OSであれば”x64″、32bit OSであれば”x86″を選びます。

DEVKITあり(WITH DEVKIT)となし(WITHOUT DEVKIT)がありますが、これはどちらでも構いません。

SassのためだけにRubyをインストールする場合は、DEVKITなしで大丈夫です。ただ、Rubyによる開発も行う場合は、DEVKIT(Development Kit)は後々必要になってくる可能性もあるため、DEVKITありの方をダウンロードしておいた方が無難です。

インストーラをダウンロードしたら、Rubyをインストールします。インストール時に、「Add Ruby executables to your PATH(Rubyの実行ファイルへ環境PATHを設定)」にチェックが入っていることを必ずご確認ください。

Rubyのインストールが完了したら、コマンドプロンプトで「ruby -v」もしくは「gem -v ruby」を実行してRubyのバージョンを確認してみましょう。以下のようにバージョン情報が表示されます。

ちなみに、Rubyがインストールされていない環境では、コマンドが実行できません。

Rubyがインストールされていないと、コマンド実行時に以下のようなメッセージが表示されます。

‘ruby’ は、内部コマンドまたは外部コマンド、操作可能なプログラムまたはバッチファイルとして認識されていません。

‘gem’ は、内部コマンドまたは外部コマンド、操作可能なプログラムまたはバッチファイルとして認識されていません。

ステップ2. Sassのインストール

Rubyのインストールが完了したら、次はSassをインストールします。

コマンドプロンプトを起動し、「gem install sass」というコマンドを実行します。しばらく待つと、以下のような画面が出てインストール完了です。

Sassが正常にインストールされているか確認するには、コマンドプロンプトで「gem -v sass」というコマンドを実行します。インストールされていれば、バージョン情報が表示されます。

ステップ3. Sassコンパイラ「Koala」のインストール

Sassの記法で書いたファイルは、そのままではブラウザが理解できません。そのため、SassのファイルをCSSファイルに変換(コンパイル)してあげる必要があります。

そこで便利なのが、Koalaです。Koalaを使えば、SassをCSSに自動で変換することができます。

※なお、今回はKoalaをご紹介しますが、他にも「prepros」というコンパイラがあったり、VSCodeでは「Live Sass Compiler」や「Easy Sass」という拡張機能があったりします。

まずはKoalaの公式サイトにアクセスして、インストーラをダウンロードしましょう。

ダウンロードしたインストーラを実行して、Koalaをインストールします。[Next]をクリックしていくだけなので、インストールで特に迷うことはないかと思います。

インストールが完了したら、早速Koalaを起動してみましょう。左上にある歯車マークをクリックすると、Koalaの設定変更ができます。

Generalタブにて、Languageで「日本語」を選択すれば日本語化できます。

では、実際にKoalaを使ってみましょう。適当なフォルダを作成し、その中に「test.scss」というファイルを追加します。作成したフォルダ毎、Koalaにドラッグ&ドロップします。

.scssファイルを自動で認識して画面上に表示されるので、クリックしてファイルを選択します。すると右側に設定項目が表示されるので、好みの設定に変更します。

自動コンパイル	CSSファイルへの自動変換
Compass Mode	Compassモード
Source Map	Source Mapの有効化(ブラウザのデベロッパーツールでスタイルを確認した時にSass側の行番号がわかる)
Line Comments	Sass側の行番号をコメントで追加
Debug Info	デバッグ情報(@media -sass-debug-info)の追加
Unix New lines	Unixコードにするかどうか
Autoprefix	ベンダープレフィックスの自動付与
アウトプットスタイル	CSSに変換した時の記述スタイル

アウトプットスタイルは、それぞれ以下の通りです。

nested：Sassのネスト(入れ子)を引き継ぐ
compact：セレクタ・プロパティ・値を1行にまとめる
compressed：改行や空白を取り除いて軽量化
expanded：通常のCSS

アウトプットスタイルは「expanded」にしておけば間違いないかなと思います。

ステップ4. 実際にSassを記述してみましょう

Koalaのインストールと設定ができたら、Sassが使える環境構築は完了です。Koalaにドラッグ&ドロップした.scssファイルに以下を記述してみてください。

ul {
  margin: 0;
  padding: 0;
  li {
      margin-bottom: 30px;
      img {
          width: 100%;
      }
      a {
        color: #333;
      }
  }
}

同じフォルダ内に.cssファイルが作成されていますので、CSSファイルを確認すると、以下のように変換されているのがわかります。

ul {
  margin: 0;
  padding: 0;
}
ul li {
  margin-bottom: 30px;
}
ul li img {
  width: 100%;
}
ul li a {
  color: #333;
}

これはごくごく簡単な例ですが、セレクタを入れ子にして記述することで、簡単に子要素のプロパティを指定できます。

このように、効率よくCSSを書けるようになるのがSassのメリットです。

あとがき

長々と書きましたが、実際に作業してみると10～15分くらいで終わります。

上述した内容はあくまで環境構築なので、Sassの記法については学習する必要があります。とはいっても、CSSを理解していれば習得は早いと思います。

ちなみに、例として紹介したコードは”SCSS記法”と呼ばれる書き方で、セレクタの括弧やプロパティのセミコロンをなくした”SASS記法”という書き方もあります。

どちらの記法を使うかは自分がやりやすい方を選べば良いですが、SASS記法はコードがちょっと見辛いので、SCSS記法の方が普及しています。

WindowsでSassが使える環境を構築する方法