汚いcssを整形するWebアプリ「css2scss」でリファクタリングした際、「ヤバい」と感じた３つの機能と３つの点

#あらまし
別の業者が構築したという客先のホームページの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: 0 1px 1px rgba(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: 0 1px 1px $black_20;
}

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

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

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

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

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

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