Sass（サス）

CSSのメタ言語「Sass」（Syntactically Awesome Stylesheets）

CSSよりシンプル。ネスト（入れ子）構造なのでパッと見て分かりやすい！

Sass3.0からSCSS(Sassy CSS)記法が使えるようになりました。
拡張子は「sass」、SCSSの場合は「scss 」。※現在はSCSSが主流。

■Sassを使えるようにする

「sass」「scss 」を「css」に書き換えるためには「コンパイル※」する必要があります。
※プログラミング言語で書かれた文字列（ソースコード）をコンピュータ上で実行可能な形式（オブジェクトコード）に変換

MacはRubyがプリインストールされているのでインストール不要。
Winの場合はRubyをダウンロード。

Rubyでコンパイルするためには、SassをRubyにインストールする必要があります。

※Macは「sudo gem install sass」

【Windows】

・Rubyでコマンドプロンプトを開く

・sass --watch style.scss:style.cssを実行（自動コンパイル）

※主導でコンパイルする場合は「sass style.scss:style.css」

・Suout（無料：Win/Mac ）
・Prepros（無料：Win/Mac ）
・CodeKit（有料：Mac ）
・Compass.app（有料：Win/Mac ）
・LiveReload（有料：Win/Mac ）
など

Rubyをインストールしなくても、Compassをインストールしなくても
サイト設定するだけで使えます！

※CSSプロセッサーを展開して、「一般」の「ファイル保存時に自動コンパイルする」にチェック
※「SASS/SCSS: Ourput Style」で好きなスタイル↓を選択

ソースと出力↓

※最初「ソースと同じフォルダー」にチェックしていたらコンパイルされなかったので
「出力フォルダーを定義」に変更したらコンパイルされるようになりました。

「ファイル」→「新規」でドキュメントタイプを「SCSS」（あるいは「Sass」）を選択して「作成」

Sassを使ってなかったサイトのcssをsass・scssに逆コンパイル（コンバート）できたらいいのに
と思っていたら･･･便利なツールがありました！
CSS 2 SASS/SCSS CONVERTER