多数元素和组件之所以有丰富多彩的颜色变化得益于使用语法的修饰符 .is-$color
,例如 is-primary
或者 is-dark
。
这主要感谢 $colors
Sass map,通过该变量 Bulma 可循环抓去所有的颜色和它们的反相颜色。
颜色
颜色是用来个性化大多数 Bulma 元素和组件的
多数元素和组件之所以有丰富多彩的颜色变化得益于使用语法的修饰符 .is-$color
,例如 is-primary
或者 is-dark
。
这主要感谢 $colors
Sass map,通过该变量 Bulma 可循环抓去所有的颜色和它们的反相颜色。
颜色 | 变量 | 值 | 计算值 | 反相值 | 计算反相值 |
---|---|---|---|---|---|
White |
$white
|
$white
|
hsl(0, 0%, 100%)
|
$black
|
hsl(0, 0%, 4%)
|
Black |
$black
|
$black
|
hsl(0, 0%, 4%)
|
$white
|
hsl(0, 0%, 100%)
|
Light |
$light
|
$white-ter
|
hsl(0, 0%, 96%)
|
$grey-darker
|
hsl(0, 0%, 21%)
|
Dark |
$dark
|
$grey-darker
|
hsl(0, 0%, 21%)
|
$white-ter
|
hsl(0, 0%, 96%)
|
Primary |
$primary
|
$turquoise
|
hsl(171, 100%, 41%)
|
#fff
|
#fff
|
Link |
$link
|
$blue
|
hsl(217, 71%, 53%)
|
#fff
|
#fff
|
Info |
$info
|
$cyan
|
hsl(204, 86%, 53%)
|
#fff
|
#fff
|
Success |
$success
|
$green
|
hsl(141, 53%, 53%)
|
#fff
|
#fff
|
Warning |
$warning
|
$yellow
|
hsl(48, 100%, 67%)
|
rgba(0, 0, 0, 0.7)
|
rgba(0, 0, 0, 0.7)
|
Danger |
$danger
|
$red
|
hsl(348, 100%, 61%)
|
#fff
|
#fff
|
Bulma 也提供 $shades
Sass map,该值包含介于黑和白之间的灰度阴影值。
颜色 | 变量 | 值 |
---|---|---|
Black bis |
$black-bis
|
hsl(0, 0%, 7%)
|
Black ter |
$black-ter
|
hsl(0, 0%, 14%)
|
Grey darker |
$grey-darker
|
hsl(0, 0%, 21%)
|
Grey dark |
$grey-dark
|
hsl(0, 0%, 29%)
|
Grey light |
$grey-light
|
hsl(0, 0%, 71%)
|
Grey lighter |
$grey-lighter
|
hsl(0, 0%, 86%)
|
White ter |
$white-ter
|
hsl(0, 0%, 96%)
|
White bis |
$white-bis
|
hsl(0, 0%, 98%)
|
此页面为开放源码页面。
发现排版问题?或者表达模糊?
在 GitHub 改进该页内容