Sassを導入する＆初めてScssを使ってみる【Windows・Mac】

こんにちは、okutani(@okutani_t)です。今まで、Webコーディングの際はCSSでちょこちょこ書いていたのですが、最近はやりのSassを使ってみました。

仕事場の開発環境がWindows、自宅がMacなので、それぞれの導入手順を本記事に記しておきます。

Sassとありますが、実際に利用するのは『Scss』です。かんたんな説明ですが、次のような違いがあります。

最近ではCSS3ライクである『Scss』が主流なようです。Scssは、Sassをインストールすれば利用できるようになるため、『SassをインストールしてScssを利用する』といった流れになります。

なお、Scssを利用するには以下が必要です。

ドットインストールにも解説が載っているので、一度目を通しておくと良いかと思います。

参考Sass/SCSS入門 (全15回) – プログラミングならドットインストール

本記事では、Windows・MacそれぞれにSassをインストールをおこない、かんたんな使い方を説明しています。

では、はじめにRubyをインストールするところから始めていきましょう。

スポンサーリンク

Rubyのインストール

SassをインストールするためにRubyが必要です。Rubyが何かよく分からなくても大丈夫なので、ここは気にせずにRubyのインストールを進めましょう。

Macの場合、Rubyはデフォルトでインストールされているため、そのままSassのインストールの項目まで進んでください。

Windowsの場合は、下記サイトから実行ファイルをダウンロードします。

LINKDownloads

今回は、2015.11現在の最新版である「Ruby 2.2.3 (x64)」をダウンロードしました。

ダウンロードが済んだら、ダブルクリックでインストーラーを実行しましょう。

『インストール先とオプションの指定』まで進み、次のとおりに設定します。

『Td/Tkサポートをインストールする』はGUIアプリケーションの作成を可能にするオプションです。ここでは不要なのでチェックしませんでした。

『Rubyの実行ファイルへ環境変数PATHを設定する』にチェックを入れます。これをチェックしないとRubyが実行できないので注意してください。

『.rbと.rbwファイルをRubyに関連づける』にチェックしておくと自動で.rbファイルをRubyのファイルとして扱ってくれるのでチェック。

チェックが済んだら、そのままRubyのインストールを進めてください。

Rubyのインストール確認

問題なく進めば、Rubyのインストールが完了します。

Rubyが無事にインストールされたか、コマンドプロンプトを使って確認してみましょう。次のコマンドで確認します。

> ruby -v

Rubyのバージョンが確認できればOKです。

Macの方でも一応、Rubyが入っているか確認しておきましょう。

$ ruby -v

では、次にSassを導入していきます。

Sassのインストール(Windows)

WindowsにSassをインストールする手順を紹介します。インストールはコマンドプロンプトにコマンドを入力して行っていきます。

まず初めに、文字コードをUTF-8にして文字化けを防いでおきます。

> set LANG=ja_JP.UTF-8

Sassのインストール時に使う『RubyGems』をアップデートしておきます。

> gem update --system

RubyGemsを使って、Sassをインストールします。

> gem install sass

これでWindowsにSassが導入できました。

下記のコマンドで無事インストールされたか確認しておきましょう。

> sass -v

Sassのバージョンが表示されればOKです。

Sassのインストール(Mac)

MacにSassを導入する手順を紹介していきます。

ターミナルを開いて、次のコマンドでRubyGemsをアップデートしておきます。

$ sudo gem update --system

次のコマンドでSassをインストールします。

$ sudo gem install sass

これでMacにSassがインストールされました。確認しておきましょう。

$ sass -v

バージョンが表示されればOKです。

Sassのインストールが済んだので、実際にScssを記述して、CSSファイルを生成してみましょう。

Sassを使ってCSSファイルを生成してみる

かんたんですが、Sassの使い方を載せておきます。

『style.scss』という名前でファイルを作成し、下記を記述。

#main {
  width: 940px;
  p {
    font-size: 14px;
  }
}

このように『#mainの中にあるp』を、入れ子にして書くことができます。直感的で分かりやすいですね。

ではさっそく、ScssからCSSに変換(コンパイル)してみましょう。

まずはコマンドプロンプト(Macはターミナル)のcdコマンドで.scssファイルがある場所まで移動します。

例として、デスクトップにstyle.scssがある場合は次のとおりです。

$ cd ~/Desctop

次のコマンドで、style.cssからstyle.cssを出力することができます。

$ sass --style expanded style.scss:style.css

これで、style.scssからstyle.cssを生成することができます。ちなみに『--style expanded』オプションをつけてあげることで、インデントをきれいに整えてくれるので便利です。

--style expandedなし

#main {
  width: 940px; }
  #main p {
    font-size: 14px; }

--style expandedあり

#main {
  width: 940px;
}
#main p {
  font-size: 14px;
}

また、.scssと.cssファイルがそれぞれscss, cssフォルダに格納されている場合は、

$ sass --style expanded scss/style.scss:css/style.css

としてあげればOKです。

CSSファイル生成を自動化する

毎回、わざわざコマンドを打ってCSSに変換するのはめんどうですね。

次の手順を行うと、.scssファイルを保存したとき自動で.cssファイルに変換して出力してくれます。

$ sass --style expanded --watch scss:css

上記コマンドをかんたんに解説すると、『scssフォルダ内のファイルが変更されたら、cssフォルダに書き出す』といったことが自動化される、といったものです。

style.scssに何か変更を加えて保存してみましょう。自動でcssフォルダの中にあるstyle.cssに、変更が反映されます。

自動変換を終了したい場合はCtrl + Cを入力しましょう。

とても便利にCSSを書くことができました。この機会にぜひScssを活用してみてください。

まとめ

Windows・MacにSassを導入する方法と、Scssのかんたんな使い方を説明しました。

さらに、Compassなどのフレームワークを使うとより便利に使えます。興味がある方は調べてみてください(僕もまだ勉強中…)。

HTML,CSSをよく書く方は、この機会にSass(Scss)を使えるようになっておくと良いですね。参考にしてください。