SCSS (Sass): 開発環境

Mac ならターミナルで gem install します。
Windows はインストーラーが配布されています。
http://sass-lang.com

ちなみに事前に gem update --system をしておくとよさそうです。
gem のバージョンは gem -v で表示できます。

$ sudo gem update --system
$ gem -v
2.1.3

 

Sass のインストール

sass -v とすると、インストールされた Sass のバージョンをチェックできます。

$ sudo gem install sass
$ sass -v
Sass 3.2.10 (Media Mark)

 

Sass ファイルから CSS に変換

Sass は sass 形式と、scss 形式で書くことができ、css の記法そのままでかける scss がよさげです。
scss は css に Sass の機能(変数や mix-in、import に条件分岐など)が加わったようなものなので、
プログラムが得意でない方にもオススメできますし、
逆にプログラムは得意だけど CSS の冗長さが苦手なプログラマーな方にも Sass による開発効率アップでオススメできます。

scss 記法で書いたファイルは .scss 拡張子で保存します。

sass --watch を使うと、scss ファイルが更新されるたびに css ファイルを自動出力する監視状態に入ってくれます。

$ sass --watch hoge.scss:hoge.css

control+C キーで監視を解くことができます。

ディレクトリも指定できます。

$ sass --watch scss/:css/

 

関連リンク

Can I use…
・HTML / CSS / JavaScript / SVG / その他フロントエンド技術が、IE / Firefox / Chrome / Safari / Opera / iOS / Andriod とかのどのバージョンから使えるかまとまっているサイト