Fork me on GitHub

役立ちぬ開発史、それはただのブログ

覚えておくといい、ブログの時代は終わる。いつかその内、きっとたぶん…

ズルいデザインを学ぶためにSassとCompassをインストール

| Comments

ズルいWebサービスデザインの話を聞いたので、そのとき話題に上がったデザインを触るために、まずSassとCompassを導入して、環境だけを整えました。準備だけでもしておけば、ハッカソンなどのイベントで急に使う必要が出たときに対応できるので、備えあれば憂いなしですね。
でも、最近はまとまった時間が取れていないので、準備だけや、少し触って終わりってことが多いので、早く自由時間がほしい。

SassとCompassとは

Sassは聞いたことありましたが、触ったことはなく、Compassに至っては名前も初めて聞きました。でも、デザインしている人にとっては、もう当たり前のツールみたいです。どんなものかを詳しく調べてみたら、よさ気なスライドを発見しました。

コレからざっくりかいつまむと、CSSを楽に書くのがSassで、Sassを楽に書くのがCompassです。SassやCompassで書いたものをそのままWebに使えないので、CSSにコンパイルする必要があるみたいです。

SassとCompassの導入

SassとCompassをインストールするためには、Rubyが必要なので、インストールしましょう。Macの人は、もともと用意されているので大丈夫です。Rubyがインストールできたら、gemでSassをインストールするだけです。

1
sudo gem install sass

Sassがちゃんとインストールされたか確認しましょう。

1
sass -v

バージョンが出力されたら大丈夫です。

1
Sass 3.2.12 (Media Mark)

Sassをインストールしたら、一緒にCompassもインストールされるので、確認しましょう。

1
compass -v

以下のように、出力されたら大丈夫です。

1
2
3
4
5
Compass 0.12.2 (Alnilam)
Copyright (c) 2008-2013 Chris Eppstein
Released under the MIT License.
Compass is charityware.
Please make a tax deductable donation for a worthy cause: http://umdf.org/compass

SassやCompassで使えるコマンドは、-hで調べることができます。

1
2
Sass -h
compass -h

GUIツールを導入

黒い画面とよばれるターミナルを使って、コマンドを打つのが苦手な人やあまり好きでない人には、先ほどのスライドにも紹介されているPreprosKoalaのようなツールがあるので、ぜひコレを使いましょう。ただし、KoalaはgemでSassを入れる必要があります。

おわりに

SassとCompassはとても簡単に準備できました。なので、今度からズルいデザインをちょっとずつ勉強していきます。デザインスキルが無いせいで、今までいろんなイベントで苦しんだので、コレを機にちょっとでも良いデザインを作れるように努力します。

Comments