函数(Functions)

用于计算颜色或者其他值的实用函数(此部分试用sass模式,单文件模式不用看)

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

  • powerNumber($number, $exp): 计算基于另一个数字的值。返回一个数字。
  • colorLuminance($color): 定义颜色是深色还是浅色。返回一个介于0和1之间的十进制数,<=0.5表示暗,>0.5表示亮。
  • findColorInvert($color): 根据颜色的亮度返回70%透明黑色或100%不透明白色。

findColorInvert()函数 #

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阈值的颜色,重写findColonvert()函数非常有用,最好手动设置反转颜色。
例如,此紫色阴影的颜色亮度为0.5529。最好将颜色反转设置为白色而不是透明黑色:

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

返回头部

问题反馈
返回顶部