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

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

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

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

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

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

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

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

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

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

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

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

RubyInstaller

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

Rubyのダウンロード

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

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

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

Add Ruby executables to your PATH

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

Rubyのバージョン確認

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

コマンドが実行できない

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

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

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

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

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

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

Sassのインストール

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

Sassのバージョン確認

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

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

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

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

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

Koalaのダウンロード

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

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

Koalaの設定変更

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

Koalaの日本語化

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

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

KoalaのSass設定
自動コンパイル 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記法の方が普及しています。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です