Sass/Compassでコンパイルするとカラーコードが色名になってしまう件

先日行われた「CSS Nite LP, Disk 32: Sass」で「コンパイルするとカラーコードが色名になってしまいます。」という質問を受けたので対応方法を解説します。

まず、どういった現象かというと以下の様なSassを記述すると、

$color1 : #FFF;
$color2 : #FFFFFF;
.div1{
	color:$color1;
}
.div1{
	color:$color2;
}

コンパイル後に書き出されるCSSは以下のようになります。

/* line 3, ../sass/style.scss */
.div1 {
  color: white;
}
 
/* line 6, ../sass/style.scss */
.div1 {
  color: white;
}

Sass側で変数から値を抜き出す際にカラーコードがあるものはカラーコードに変換しています。

$color1のように場合によっては目的のコードより長くなってしまいます。

これを解決するにCompassのconfig.rbに以下のスクリプトを追加してください。

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

現在のSass::ScriptのColorクラスをカラーコードの変換式を取り除いたもので上書いています。

config.rbの設定はcompass watch時に反映されますので、config.rb変更後は再度compass watchをしてください。

書きだされるCSSは以下のようになります。

/* line 3, ../sass/style.scss */
.div1 {
  color: #ffffff;
}
  
/* line 6, ../sass/style.scss */
.div1 {
  color: #ffffff;
}

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

/* line 3, ../sass/style.scss */
.div1 {
  color: #fff;
}
  
/* line 6, ../sass/style.scss */
.div1 {
  color: #fff;
}