Sassで変数に16進数の色値を入れるとカラーネームになる件の解決策（案）

先日8日に参加したHTML5 Conferenceのセッション「実践Sass」において、Sassで変数に16進数の色値を入れてコンパイルすると、一部の色値がカラーネームに変換される問題を知りました。

SCSS

$color1: #000000;
.foo{
	color: $color1;
}

CSS

.foo{
color:black;
}

slideshareにスライド（実践Sass 前編）が上がっています。

16進数の記述とカラーネームが混ざるのはあまり良い気がしないので解決方法を探ってみたところ、Class: Sass::Script::Colorのto_sメソッドを変更することで解決することが分かりました。

ただ、Sass本体を変更するとアップグレードの際や他の作業者との共有が面倒だったりするので、常用しているCompassを利用して解決する方法を考えました（以前紹介したカスタムSass関数の応用です）。

（2014年2月17日追記）Compassは必須ではありません。config.rbに設定を書き込むことが出来るので、利用が楽であったことからcompassを利用したのです（grunt導入の直前でした）。

手順

次のコードを/_scss/extension/color.rbとして保存します。（/_scss/内は.scssやmixinやカスタムSass関数を格納しています。）

require 'sass'

module Sass::Script
 class Color
 def to_s(opts = {})
 return rgba_str if alpha?
 return smallest if options[:style] == :compressed
 #return COLOR_NAMES_REVERSE[rgb] if COLOR_NAMES_REVERSE[rgb]
 hex_str
 end
 end
end

/config.rbに次のコードを追記します。
```
require "./_scss/extension/color.rb"
```
いつも通りcompass watchやcompass compileで変換します。

（2014年2月17日追記）sassでコンパイルする場合は、--require "./_scss/extension/color.rb"を付けて実行すれば、同様の動作となります。

動作確認

次のように、問題なく動いているようです。#000としても#000000になりますが、それは良しとします。

SCSS

$color1: #000000;
$color2: #fff;
.foo{
	color: $color1;
}

.bar{
	color: mix($color1 , $color2 ,50%);
}

CSS

.foo{
color:#000000;
}

.bar{
color:#7f7f7f; 
}

（2014年2月17日追記）Sass 3.3.xでは...？

カラーネームになる現象は確認できませんでした。sass/lib/sass/script/color.rbが無くなっているようです。