Sassの使い始めメモ

Yuuです。

前回、LESSについて書き方だけメモったんですが、Sassについても触れてみようかと。

Sassを使うための環境構築

windowsにRubyをインストール

とりあえず、Windows環境で構築します。

http://rubyinstaller.org/

インストールするときに、チェック項目があったので、とりあえず全てチェック。 特に、Pathの項目をチェックしておかないと、あとでシステムの環境変数を自分で変更しなければならなくなるので注意。

Rubyがインストールされたか確認。

1
2
ruby -v
ruby 1.9.3p194 (2012-04-20) [i386-mingw32]

バージョン情報が表示されれば、無事インストールされてます。

gemのアップデート

次にgemをアップデートします。

1
gem update --system

gemでSassをインストール

1
gem install sass

インストールが終われば、Sassを使う環境が構築できました。

Sassを使ってみる

変数を使う

LESSでは、@マークでしたが、Sassは$です。 記述したファイルを「C:\Documents and Settings\hogehoge」以下に「test.scss」という名前を付けて保存します。 hogehogeはお使いのパソコンのユーザー名になります。

test.scss
1
2
3
4
5
6
7
$mgn: 10px;
h1{
     margin:$mgn;
}
h2{
     margin:$mgn;
}

コンパイルする

test.scss
1
sass test.scss test.css

コマンドプロンプトで上記コマンドを打ちます。 特に問題なく実行されれば、「test.scss」と同じところに「test.css」というファイルが出力されます。

test.css
1
2
3
4
5
h1 {
  margin: 10px; }

h2 {
  margin: 10px; }

無事生成されていれば、Sassが使えるようになりました。

GUIでコンパイル

黒い画面が嫌いで、GUI操作のコンパイルでSassを使いたい!って人もいると思います。 そんなときは、SCOUTが便利。

SCOUT http://mhs.github.com/scout-app/

Adobe AIRがインストールされていれば、使用できます。 詳しいインストール方法はこちらの記事が参考になります。 http://www.webcyou.com/?p=2280

もうちょっと使いこなしてみないとも何とも言えないので、しばらくはLESSとSASSで色々遊んでみます。

Comments