どうも、デザインちーむのさむです。
本日のネタはSassになります。

みなさん使ってますか？
今では使ってるかたが多いと思います。
Sassを使うとコーディングの速度が確実に上がります。
そして便利な機能も多くやみつきになってる人も多いのではないでしょうか。

本日はまだSassを利用していない方のために簡単に環境整備について書きたいと思います。

Sassとは

Sassとはなんぞや？

SassとはCSSを拡張したメタ言語。

簡単に言うとSassはCSSをより便利に効率的に書けるようにパワーアップさせてある言語です！

Sassのメリット

そもそもSassを導入するメリットとはなんでしょう？
以下に簡単に記載してみます。

などなど、便利な機能が多く導入しない理由はまったく見当たりません。
現在では大手の会社でも採用され初めていて業界標準になりつつあります。

環境を整えよう

本日はWindows7環境でのお話しになりますので、その他の環境の方は自身で調べてみてくださいw
Sassを利用するにはRubyが必要になります。
よってまずはRubyのインストールから始めます。

ここの操作は別の記事に記載されていますのでそちらでご確認ください。

「なにかと使える「Ruby」、インストール方法。 Windows7編」

Sassのインストール

続いて、いよいよSassをインストールしていきたいと思います。
gemコマンドを使っていきます。

gem install sass

インストールができましたらsassコマンドでバージョンを確認してみましょう。

sass -v

「Sass x.x.x」と表示されましたら無事にインストールが完了です！

Sassのアップデート

まずはgemをアップデートしローカルパッケージを最新のものにしましょう。

gem update --system

これを実行することによりgemパッケージが更新されSassも最新になります。

Sassのみアップデートしたい方は以下を実行

gem update sass

これで基本的な環境は整いました。

とりあえず使ってみよう！

とりあえず基本環境は整いましたので手を動かしてみましょう。

エディタにて「scss」と拡張子のつけたファイルを作成します。
では、test.scssというファイル名でやってみたいと思います。
以下のソースを書いてみました。

#container {
    width: 800px;
    p {
        margin: 10px 10px;
        span {
            color: red;
        } 
    }
    .test {
        font-weight: bold;
    }
}

作成したファイルをホームフォルダに置く

ホームフォルダはWindows7の場合以下になります。

「Cドライブ → ユーザー → ユーザー名フォルダ」

ユーザー名フォルダは各個人によって違います。

sassコマンドでコンパイルする

ホームフォルダにおいたSassファイルを、sassコマンドにてコンパイルします。
sassコマンドの説明は以下の通りです。

今回は分かりやすいようにまだ説明をしていないスタイルオプション(–style expanded)をつけてみましょう。(このスタイルオプションを付けることによりコンパイル後のCSSが通常のスタイルで書きだされます)
以下のコマンドをコマンドプロンプトから実行してみます！

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

ホームフォルダにtest.cssファイルが作成されたと思います。
コンパイル後のcssファイルを確認すると

#container {
  width: 800px;
}
#container p {
  margin: 10px 10px;
}
#container p span {
  color: red;
}
#container .test {
  font-weight: bold;
}

いつものcssファイルができてますね！

このような流れでSassを使用していきます。
そんなに難しくないですよね！

また、今回のようなCUI操作ではなくGUIコンパイラ、「Koala」を利用することでマウスを使った直観的な操作をすることも可能です。
「黒い画面は嫌だ」というひとはこちらから初めても良いと思います。

まとめ

いかがでしたでしょうか？
今回は環境整備と簡単な基本操作しか説明してませんが、ここまでくれば「とにかく使ってみる」ことで自然と覚えていけると思います。

ちょっとしたこういう知識があるかないかで作業効率はかなり変わってきます。
みなさんも業界標準となりつつあるSassを利用してみてはいかがでしょうか！