WindowsにSassを入れてみる

こんにちは、
制作担当のコメダ（@rayfields）です。

サイトをリニューアルして初めての投稿です。

僕は、日頃HTMLやらCSSを書いていることが多いので、
その分野を中心に更新して行きたいと思います。

よろしくお願いします。

今回は、最近僕の心を鷲づかみにするSassを、
Windows環境にインストールして、CSSに変換するところまでを書いていきます。

環境のセットアップ

Rubyをインストール

Sassを使うにあたって、Rubyというものが必要になります。
インストーラーページから最新版をインストールします。

Sassのインストール

インストールしてできたRubyフォルダから
「Rubyコマンドプロンプトを開く」をクリックしてコマンドプロンプトを起動させます。

※通常のコマンドプロンプトでもできますが設定が必要なので今回はこちらを使います。

そして以下を入力します。

gem install sass

これで環境が整いました。

実際にさわってみる

環境ができたところで、実際にSassファイルを作成し、CSSに変換してみます。

Sassファイルの作成！

Cドライブにsampleという名前で作業用フォルダを作成し、
以下の内容で、style.sassファイルを作成します。

$baseColor: #663322;

a{
    color: $baseColor;
    &:hover{
        text-decoration:none;
    }
}

h1{
    color: $baseColor;
}

CSSに変換

コマンドプロンプトに戻ります。
まず、作業しやすように、ディレクトリを移動します.

cd C:\sample

SassをCSSに変換

sass style.scss:style.css

そうすると、style.cssが生成され、
以下のように変換されます。

a {
  color: #663322; }
  a:hover {
    text-decoration: none; }

h1 {
  color: #663322; }

どうでしょう？これだけでも感動しませんか？
$baseColorの部分を変えれば一発で済むので、修正の時間が大幅に短縮出来ます。

しかし、毎回このコマンドを打つのは面倒なので
以下を入力します。

sass --watch style.scss:style.css

こうすることで毎回ファイルを保存するたびに自動的に変換してくれます。
終了させたい場合は、Ctr＋Cを入力してください。

Sass参考サイト

  • f
  • t
  • p
  • h
  • l
  • n