sassを始めてみよう(設定/Mac)

sass css scss

scssとは

scssとはぶっちゃけていえば「すごいCSS」である。
これだけだとミもフタもないので、大きくまとめて4行で説明すると

  • 変数が使える
  • ネストできる
  • Mixin ができる
  • セレクタの継承ができる

である。

scssには「sass」と「compass」があり、それぞれのインストール方法を紹介したい。

sassインストール

今回はmacに設定してみる。
windowsだとRubyを前もってインストールする必要があるのだが,Macは標準でインストされてるので省略できる。

ターミナルを起動する
［アプリケーション］ >　[ユーティリティー]　>　[ターミナル]をダブルクリックで起動。

Last login: XXXX XXXX 00 00:00:00 on ttys000
iMac: ~ nanashi$ 　

ターミナルに表示されている2行目から

  • iMac = コンピュータ名
  • ~ = 現在地（カレントディレクトリ）
  • nanashi = ユーザ名
  • $ = ダラー、この記号はコマンド入力待ちを意味する。

それではsassをインストールする前に、Rubyのバージョンを確認するコマンド,
"ruby -v"を入力する。

Last login: XXXX XXXX 00 00:00:00 on ttys000
iMac: ~ nanashi$  ruby -v
ruby 2.0.0p247 (2013-06-27 revision 41674) [universal.x86_64-darwin13]

このようにRubyがver2.0を確認できました。
もしver1.8.7などの場合はサポートが2013’6月に終了しているので
アップデートする必要があります。

それではsassをインストールコマンドを入力してみよう。

sudo gem install sass

システム管理者のパスワードを要求されますので入力してインストール完了。

compassインストール

ターミナルを開き以下のコードを入力

sudo gem install compass

システム管理者のパスワードを要求されますので入力してインストール完了。

ちゃんとcompassがインストールされたかどうかをチェックするには、続けて下記を入力して
compassのバージョンを確認できる。

compass -v


最後に「koala」をインストール

ここまで来たらあともう少し、sassをcssに変換するソフト「koala」をインストールします。

ダウンロード先:koala