函数(Functions)

用于计算颜色或者其他值的实用函数

Bulma 使用 3 个自定义函数来动态设定颜色和值:

  • powerNumber($number, $exp): 计算一个数字的乘方,输入一个数字及指数,输出一个他的乘方.
  • colorLuminance($color): 定义颜色是深色还是浅色,返回 0-1 之间的小数,其中 <=0.5 是暗色, >0.5 是亮色
  • findColorInvert($color): 根据颜色的亮度返回 70% 透明黑色或 100% 不透明白色。

findColorInvert() 函数 #

The findColorInvert($color) 函数将一个颜色 作为输入, 并输出透明的 黑色 rgba(#000, 0.7) 或者 纯白 #fff:

  • 如果 colorLuminance($color) > 0.55, 则输出rgba(#000, 0.7)
  • 此外, 则输出 #fff

其目的是为了保证输入颜色作为 背景文字时 的 可读性

color color luminance findColorInvert() result
#00d1b2 0.52831 #fff Button
#3273dc 0.23119 #fff Button
#23d160 0.51067 #fff Button
#ffdd57 0.76863 rgba(0, 0, 0, 0.7) Button
#ff3860 0.27313 #fff Button
#ffb3b3 0.61796 rgba(0,0,0,0.7) Button
#ffbc6b 0.63053 rgba(0,0,0,0.7) Button
hsl(294, 71%, 79%) 0.5529 rgba(0,0,0,0.7) Button

对于亮度接近 0.55 阈值的颜色,可以 覆盖 findColorInvert() 函数,手动设置 反色。
例如, 紫色这种具有0.5529的颜色亮度。最好设置白色字体而不是透明的黑色

使用 findColorInvert() $purple-invert: findColorInvert($purple) rgba(0,0,0,0.7) Button
手动设置 $purple-invert: #fff #fff Button