あらまし

別の業者が構築したという客先のホームページのcssが非常に読みづらく、
誰も手が付けられてない状態でヤバい（compactの状態で約350行）。

そこでリファクタリングをしようと思った際に、考えた。
「どうせならsass/scss対応にした方が可読性も可用性も上がる！ヤバい！」

sass/scss → css は当たり前として、
css → sass/scss って出来るのかよ、と思い調べてみると、数個発見した。

そのうちの１つ、今回ご紹介する「css2scss」が非常にエレガントだった。
実際に使用して感激して落胆したポイントを、それぞれ３つに絞ってご紹介。

css2scss

sass/scssについては、まずはアレなcssを突っ込んでみて挙動を確認して頂ければ幸い。
また、下記のリファレンスが総括的で解りやすい。ご一読あれ。

Sass 3.2 オレオレリファレンス

ヤバいを連発すると丸亀製麺に行きたくなる不思議。

2015-03-03更新：アップデートによりヤバかった点が改善された旨を追加

2015-02-18更新：sassを編集する上で有用だったリンクを追加

2015-02-16更新：「compassが使える場合は更にヤバい」を最下段付近に追加

３つの機能がヤバい（いい意味で）

1. プレースホルダに纏めてくれる機能がヤバい
2. フォント、色、URLを変数化する機能がヤバい
3. 色見本を作ってくれる機能がヤバい

プレースホルダに纏めてくれる機能がヤバい

カンマ区切りのクラスは、sass3.2から追加されたプレースホルダに纏めてくれる。
設定「How many properties for@extend?」の値より項目が多い場合は纏めない。

//公式サンプルより//before.a.b,.c.d{color:#333;font-size:1.4em;}//after%extend_0{color:#333;font-size:1.4em;}.a.b,.c.d{@extend%extend_0;}

プレースホルダについては、こちらが凄く解りやすいかと。
Qiita Sass(SCSS)のプレースホルダーを使ってDRYなCSSを書く

（公式サンプルだと、いまいち旨みが解りづらいナァ）

フォント、色、URLを変数化する機能がヤバい

フォント、色、URLの値は、全ての項目が変数化されてファイル冒頭に配置される。
同じ値を使っていた場合は、１つの変数に統合してくれる。

//公式サンプルより//before.a{color:red;background:#abcdef;font-family:Arial,Helvetica,sans-serif;}//after//colors$color_0:red;$color_1:#abcdef;//fonts$font_0:Arial;$font_1:Helvetica;$font_2:sans-serif;.a{color:$color_0;background:$color_1;font-family:$font_0,$font_1,$font_2;}

色見本を作ってくれる機能がヤバい

ページ下に、変数化した色の一覧をグラフィカルに出力してくれる。
それぞれの色には、近い色の名前をつけてくれる。

更に設定「Color names as variable names?」をyesにすれば、
その名前を元にした変数名をつけてくれる。

//colors$white:#ffffff;$color_iron_approx:#d4dcd6;$color_science_blue_approx:#0066b7;$color_alto_approx:#dddddd;$color_storm_dust_approx:#666666;$color_bay_of_many_approx:#19448e;//etc...

３つの点がヤバい（悪い意味で）

フォントを変数化する際にコーテーションが外れるのがヤバい（解決済）

2015-03-03追記

「What quotes should your fonts and urls have?」の項目で、シングル/ダブルコーテーションを強制するか外すかを選択できるようになった。
全て付けるか全て外すかの二択になるが、見た目を統一化できるので便利。

値が重複したURL変数が作られるのがヤバい（解決済）

$url_9:url("/img/mark/listmark01.png");$url_10:url("/img/mark/listmark01.png");$url_11:url("/img/mark/listmark02.png");$url_12:url("/img/mark/listmark03.png");$url_13:url("/img/mark/listmark01.png");$url_14:url("/img/mark/listmark02.png");$url_15:url("/img/mark/listmark03.png");$url_16:url("/img/mark/listmark04.png");

2015-03-03追記

以前までは上記のようなコードを出力していた。
現在ではバグが改善され、重複したURL変数が生成されなくなった。

変数名・プレースホルダ名がダサくてヤバい

オサレな可読性の高い名前に置換しよう。

compassが使える場合は更にヤバい

//before.button{border-radius:5px;text-shadow:01px1pxrgba(0,0,0,0.2);}//after//colors$black_20:rgba(0,0,0,0.2);.button{//Instead of the line below you could use @includeborder-radius($radius, $vertical-radius)border-radius:5px;//Instead of the line below you could use @includetext-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)text-shadow:01px1px$black_20;}

著者訳：そんなタルいもん書いてないでcompassからコレを＠includeしとけよ

総評

本当に助かった。特に色見本まで生成してくれるのは最高。
コイツを通したscssファイルを足掛かりにして、プレースホルダやmixinを書いていった。

実際のコンパイル→アップロードにはNetbeansを使用したが、
リファクタリング作業には、sassmeisterをメインで使用した。
ブラウザ上でリアルタイムレンダリングできるので、異常検知が容易。
ただエディタの検索機能が貧弱なので、手元のエディタとの併用を勧める。
http://sassmeister.com/

また、この辺のチートシートを手元に置いておくと役に立つ。かも。
sassチートシートを作りました
Compassチートシートを作りました

欠点さえ把握できれば、css解析という後向きな作業も快適になるのでは。

なお、scssを業務で使うのが初めての為、何か誤解を生む表現がありましたら、ご連絡か編集リクエストください。