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;
}

#FFFが#ffffffに変換され、長くなっているのが気になりますね。

色の短縮を有効にする

Sass::ScriptのColorクラスを見ていて気づいたのですが、色の短縮つまり「#FFFFFF」を「#fff」といった短縮形に変換する機能はoutput_styleがcompressedの場合のみ有効なようです。以下のようにoutput_styleに関係なく利用できるようにしたほうが個人的にはお勧めです。

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

こうすることで最初のscssファイルの記述はコンパイル後に以下のように出力されます。

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

参考:Sassで変数に16進数の色値を入れるとカラーネームになる件の解決策(案) | Another Sky

関連エントリー

Compassで書き出すCSSファイルを軽量化する
Source MapでSass/Compassを簡単にCSSをデバッグする
Sass/Compassで保存した際に非圧縮と圧縮したCSSファイルを出力する
Compassでスプライト画象を高速に書き出す方法
CompassでデータURI スキーム
CompassでCSSスプライト

スポンサードリンク

«今どきのCSS3グラデーションの指定方法 | メイン | CSS Niteベスト・セッション2013に選出されました»

このエントリーのトラックバックURL
コメントを投稿