Macにkoala(scss,sass)をインストール

最終更新日:  |  その他, PC操作, 記事一覧

ホームページを作成する時に、もっと簡単にcssを書きたいと思ったことがあると思います。
本来、普通のcssだと、細かくclass(.●●●)やID(#●●●)のを入力、またはコピペしていかないといけないので、大変不便・・・。

そんな時に活躍するのがkoala(scss)です。
入れ子形式で入力していくので、かなり便利なのです。
例えば、
今までは
#test .headernav ul li.left{ width:30%; height:auto;}
#test .headernav ul li.right{ width:70%; height:auto;}

としていた場合、scssでは
#test{

.headernav{

ul{

li.left{width:30%; height:auto;}

li.right{width:70%; height:auto;}

} /* ul */

} /* .headernav */

} /* #test */

と何回も#test .headernav ulをコピペしなくてもokなんですよね。

コンパイル後は自動的に

#test .headernav ul li.left{ width:30%; height:auto;}
#test .headernav ul li.right{ width:70%; height:auto;}

になっています。

慣れてきたらすごく便利なので是非とも使ってみてほしい。

自動コンパイル機能も付いているので、アウトプットスタイルをcomperssedにすればスペースを抜かして全てつめてくれるのでかなり軽くなります。

comperssedの状態で自動コンパイルすると

#test .headernav ul li.left{ width:30%; height:auto;}#test .headernav ul li.right{ width:70%; height:auto;}

と圧縮ファイルのようになります。

さてさて、肝心のインストール方法ですが、koalaを使うには、rubyとsassをインストールしなければなりません。
しかし、macは標準でrubyが入っているので、sassを入れるだけでok!
というわけで、sassを入れます。

まず、macを買ってくる。
あれこれ初期設定をして、PCが使える状態になったら

Launchpad→その他→ターミナルでターミナルを起動

●●●-no-iMac(MacBook-Air(:~ ◎◎◎$

のようになっているので、そこに

gem install sass

または

sudo gem install sass

と入力

こうなります↓

●●●-no-iMac(MacBook-Air(:~ ◎◎◎$ gem install sass

または

●●●-no-iMac(MacBook-Air(:~ ◎◎◎$ sudo gem install sass

returnを押してインストール完了を待つ。

無事インストールができたら次はkoalaのインストールです。

koalaダウンロードページ

ここからダウンロードして解凍して使ってください。

しかし、これだけでは使えない。

koalaを使うためにも、さらに設定が必要です。

長くなってきたので、koalaの設定は次の記事で書きたいと思います。