3

SASSでは次のことができます：

!pink = #ff43a7
!darker_pink = !pink - #333333

Rubyでも同じようにしたいです。

4

5 に答える 5

4

16 進数は、値の前に を付けることで Ruby で表すことができます0x。

pink = 0xff43a7
darker_pink = pink - 0x333333

カラーヘルパー

def color(hex)
  "#%06x" % hex
end

ERb テンプレートでの使用

.container {
  color: <%= color pink %>;
  border: 1px solid <%= color darker_pink %>;
}

出力

.container {
  color: #ff43a7;
  border: 1px solid #cc1074;
}
于 2010-04-26T15:58:27.050 に答える
2

Sass で色を加算/減算する基本的なアプローチはナンセンスであり、グレー調整を使用する場合にのみ実際に機能します。そのため、Sass 3 では、人々が色について考える方法に密接に対応する HSL ドメインでの操作を完全にサポートしています。

Sass は Ruby で記述されているため、少なくともコードを読んで何が起こっているかを確認できます。

ここにColor クラスと、それらを操作する関数があります。

それは本当に重要なコードです。なぜSassを使わないのですか？

于 2010-05-16T14:48:44.347 に答える
2

Sass モジュールを使用する

Sass ライブラリが既にある場合は、そのオブジェクトをインスタンス化して操作できます。

例えば：

red  = Sass::Script::Color.new([255, 0, 0])
gray = Sass::Script::Color.new([128, 128, 128])
red.lightness < gray.lightness # => true

#00FF0016 進数の文字列をオブジェクトに変換する組み込みの方法が必要ですが、表示されないため、次のColor関数を作成しました。 

# @param color_string - hex string, like '#22FF22'. MUST be 6 characters,
# because I don't feel like dealing with the use-case for 3. :)
def color_from_hex_string(color_string)
  # Drop the leading '#', if any
  color_string = color_string[1..-1] if color_string.start_with?('#')
  raise ArgumentError.new('Hex string must be 6 characters') unless color_string.length == 6

  # Turn into array of 2-digit decimal numbers. 
  # Eg, '808080' becomes [128, 128, 128]; '#ff0000' becomes [255, 0, 0]
  rgb_array = color_string.split('').each_slice(2).map do |slice|
    slice.join('').to_i(16).to_s(10)
  end

  # Use that to build a new Color object
  color = Sass::Script::Color.new(rgb_array)

  # Set this option so it won't complain (?)
  color.options = {:style => :compressed}

  return color
end
于 2011-12-28T15:45:46.967 に答える
0

セットの色をさまざまな色相に分散させたいというものに出会いました。HSV から RGB を取得する方法がわからなかったため、SASS ソースはあまり役に立ちませんでした。

カラージェムには、私が必要としていたものがありました。

私はこのヘルパーを書きました：

def region_color(index, size)
  h = (index.to_f / (size - 1).to_f)
  Color::HSL.from_fraction(h, 0.95, 0.3).html
end
于 2012-12-21T23:14:06.140 に答える
0

@ drawownward と @lpsquiggle の希望に従って、@ macek の回答を絞り込むには:

次のように、2 つのヘルパーを作成できます。

  def color(color)
    "#%06x" % color
  end

  def darker_color(color)
    x = color.match(/0x(..)(..)(..)/)
    r = x[1].sub(/[0-3]/, '5')
    g = x[2].sub(/[0-3]/, '5')
    b = x[3].sub(/[0-3]/, '5')
    rgb = "0x#{r}#{g}#{b}"
    "#%06x" % (rgb.hex - 0x444444)
  end

利点: 低い値 (ここでは 0 から 3 の間) で色の 16 進数を定義した場合、これらは減算の前に積み上げられるため、後で折り返して c、d になるのではなく、最終的に 0 になります。 、e、または f (これにより、予期しない色が得られます)。これは各 #rrggbb ペアの最初の値に対してのみ行われるため、#313131 は #0d0d0d になります。これは技術的には正しくありませんが、#fdfdfd よりもはるかに優れているため、十分な妥協点のように思えます。他の場合にそれらの 2 番目の値を保持します。

Erb テンプレートでは、次のように記述します。

.container {
  color: <%= color pink %>;
  border: 1px solid <%= darker_color pink %>;
}

それ以外の：

.container {
  color: <%= color pink %>;
  border: 1px solid <%= color darker_pink %>;
}

それが誰かを助けることを願っています。

于 2010-11-04T15:19:12.480 に答える