如何使用 SASS 等颜色但在 Ruby 中进行数学运算？

Question

在 SASS 中我可以做：

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

我想在 Ruby 中做同样的事情。

Answer 1

可以通过在值前添加 0x 来在 Ruby 中表示十六进制：

pink = 0xff43a7
darker_pink = pink - 0x333333

color helper

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

在 ERb 模板

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

输出中的用法

.container {
  color: #ff43a7;
  border: 1px solid #cc1074;
}

Answer 2

使用 Sass 模块

如果您已经拥有 Sass 库，则可以实例化并使用其对象。

例如：

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

必须有一种内置方法可以将像 #00FF00 这样的十六进制字符串转换为 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

Answer 3

在 Sass 中添加/减去颜色的基本方法是无意义的，只有在使用灰度调整时才真正有效。这就是为什么在 Sass 3 中，我们现在完全支持 HSL 域中的操作，这与人们对颜色的看法密切相关。

由于 Sass 是用 Ruby 编写的，因此您至少可以阅读我们的代码来了解发生了什么。

这是 颜色类，以及 < a href="http://github.com/nex3/haml/blob/master/lib/sass/script/functions.rb" rel="nofollow noreferrer">对其进行操作的函数。

这确实是不平凡的代码。为什么不直接使用 Sass 呢？

Answer 4

为了完善@macek的答案，遵循@drawnownward和@lpsquiggle的愿望：

你可以制作两个助手，如下所示：

  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之间），这些将被碰撞在减法之前，它们最终会变成 0，而不是环绕并变成 c、d、e 或 f（这会给你一个意想不到的颜色）。它只对每个 #rrggbb 对中的第一个值执行此操作，因此 #313131 变为 #0d0d0d，这在技术上是不正确的，但它比 #fdfdfd 好得多，所以这似乎是一个足够好的妥协，因为你会想要在其他情况下保留第二个值。

那么，在您的 Erb 模板中，您可以这样写：

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

而不是：

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

希望对某人有帮助。

Answer 5

我刚刚遇到一些问题，我想将一组颜色分配给不同的色调。 SASS 源没有多大帮助，因为我没有找到从 HSV 获取 RGB 的方法。

彩色宝石有我需要的东西。

我写了这个助手：

def region_color(index, size)
  h = (index.to_f / (size - 1).to_f)
  Color::HSL.from_fraction(h, 0.95, 0.3).html
end