Sass OSXにインストール

Rubyベストプラクティス -プロフェッショナルによるコードとテクニック

Sassとは？

Sass は CSS を生成するためのメタ言語。CSS の記述力ではメンテナンス性が損なわれますが、Sass を使うと構造化して記述することができる。

Sassのメリット

• CSSよりもシンプルな記法で、CSSを構造化して表現できる
• CSSとは異なり、書き手による構文のゆれが発生しない
• CSSには存在しない強力な機能（「定数」や「Mixins」など）をうまく使うことで、CSSのメンテナンス性が大幅に向上する
• Ruby on RailsやMerbといったRuby製のフレームワークとの連携が容易
• CSSの出力形式を柔軟に選択できる

Sassをインストールする

Sass – Syntactically Awesome Stylesheet

http://sass-lang.com/download.html

こちらのサイトを参考に、OSXにインストールしてみました。

環境: Max OSX 10.7.2
※環境ごとに挙動が違うようなので、別環境の場合は公式サイトを参考ください。

ターミナルを起動し、以下のコマンドを入力します。

sudo gem install haml

hamlをインストールし、

sudo gem install sass

sassをインストールします

cd sasshoge
vim hoge.scss

sass用ディレクリ（例:hogesass）に移動し、.scssファイルを作成します。

hoge.scss

link
  :color #0080DD
.link:hover
  :color blue

例だと、半角スペース2文字でインデントを表現し、
コロンを属性の前に記述します。

sass --watch hogesass

このディレクトリにある、.sassファイルが更新されると、
自動的に、.cssがジェネレートされます。

hoge.css

link { color: #0080DD; }
.link:hover { color: blue; }