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に選出されました»