Sassで変数に設定した16進数の色値をカラーネームではなく、カラーコードで出力する方法をご紹介いたします。

Sassで「$color: #ffffff;」と変数に16進数のカラーコードを設定した場合、通常CSS側では「#ffffff」が「white」とカラーネームで変換されます。

カラーネームの方がカラーコードより文字列が長い場合があり、複数の色を設定するプロパティの場合、カラーネームとカラーコードが混ざり合ってしまいます。また、カラーネームが存在しない微妙なカラーコードを設定した場合、ブラウザで表示される色がデザイン上と異なってしまうこともあります。

まずは、Class: Sass::Script::Colorのto_sメソッドを変更するファイルを作成します。

1
2
3
4
5
6
7
8
9
10
11
12

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/extensions/color.rb」といったように任意のディレクトリに保存します。

次にSassの「config.rb」ファイルに「require “../sass/extensions/color.rb”」として「color.rb」ファイルを読み込みます。

最後にコマンドの「compass watch」でSassファイルを監視します。

確認をすると次のように変数内で設定した16進数の色値が、カラーネームに変換されずにそのままカラーコードで表示されているはずです。

Sass側

1
2
3
4
5
6
7
8
9
10

$BaseColor01: #ffffff;
$BaseColor02: #000000;
 
.hoge01 {
  color: $BaseColor01;
}
 
.hoge02 { 
  color: $BaseColor02;
}

CSS側

1
2
3
4
5
6
7

.hoge01 {
  color: #ffffff;
}
 
.hoge02 {
  color: #000000; 
}