变量(Variables)

看看Bulma是如何使用Sass变量让自定义是如此简单

Bulma 有 2个 变量文件 分为 4 节(sections):

  1. 初始化变量(Initial variables): 使用字面值来定义它, 比如:
    • 颜色(colors): $blue: hsl(217, 71%, 53%)
    • 字体大小(font sizes): $size-1: 3rem
    • 尺寸(dimensions): $gap: 32px
    • 其他值(other values): $easing: ease-out or $radius-large: 6px
  2. 派生变量(Derived variables): 值是通过在前面文件中所定义的变量通过计算得来. 比如:
    • 主色(Primary colors): 派生字初始化变量:
      • $primary: $turquoise
      • $link: $blue
      • $info: $cyan
      • $success: $green
      • $warning: $yellow
      • $danger: $red
      • $dark: $grey-darker
      • $text: $grey-dark
    • $background: $white-ter: 基本背景色
    • $link: $blue: the links use the primary color
    • $family-primary: $family-sans-serif: 主要字体是 sans-serif 无衬线字体系列
    • 已定义的变量的列表(Lists)和映射(Maps):
      • $colors: mergeColorMaps(("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert, $primary-light, $primary-dark), "link": ($link, $link-invert, $link-light, $link-dark), "info": ($info, $info-invert, $info-light, $info-dark), "success": ($success, $success-invert, $success-light, $success-dark), "warning": ($warning, $warning-invert, $warning-light, $warning-dark), "danger": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors)
      • $shades: mergeColorMaps(("black-bis": $black-bis, "black-ter": $black-ter, "grey-darker": $grey-darker, "grey-dark": $grey-dark, "grey": $grey, "grey-light": $grey-light, "grey-lighter": $grey-lighter, "white-ter": $white-ter, "white-bis": $white-bis), $custom-shades)
      • $sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7

需要覆盖这些变量的值,只用在导入Bulma之前设置他们即可。


初始化变量(Initial variables) #

这些 初始化变量 拥有一个字面值.

$black color hsl(0, 0%, 4%)
$black-bis color hsl(0, 0%, 7%)
$black-ter color hsl(0, 0%, 14%)
$grey-darker color hsl(0, 0%, 21%)
$grey-dark color hsl(0, 0%, 29%)
$grey color hsl(0, 0%, 48%)
$grey-light color hsl(0, 0%, 71%)
$grey-lighter color hsl(0, 0%, 86%)
$grey-lightest color hsl(0, 0%, 93%)
$white-ter color hsl(0, 0%, 96%)
$white-bis color hsl(0, 0%, 98%)
$white color hsl(0, 0%, 100%)
$orange color hsl(14, 100%, 53%)
$yellow color hsl(48, 100%, 67%)
$green color hsl(141, 53%, 53%)
$turquoise color hsl(171, 100%, 41%)
$cyan color hsl(204, 71%, 53%)
$blue color hsl(217, 71%, 53%)
$purple color hsl(271, 100%, 71%)
$red color hsl(348, 86%, 61%)
$family-sans-serif font-family BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif
$family-monospace font-family monospace
$render-mode keyword optimizeLegibility
$size-1 size 3rem
$size-2 size 2.5rem
$size-3 size 2rem
$size-4 size 1.5rem
$size-5 size 1.25rem
$size-6 size 1rem
$size-7 size 0.75rem
$weight-light font-weight 300
$weight-normal font-weight 400
$weight-medium font-weight 500
$weight-semibold font-weight 600
$weight-bold font-weight 700
$block-spacing size 1.5rem
$gap size 32px
$tablet size 769px
$desktop computed 960px + (2 * $gap)
$widescreen computed 1152px + (2 * $gap)
$widescreen-enabled boolean true
$fullhd computed 1344px + (2 * $gap)
$fullhd-enabled boolean true
$easing keyword ease-out
$radius-small size 2px
$radius size 4px
$radius-large size 6px
$radius-rounded size 290486px
$speed duration 86ms
$variable-columns boolean true

派生变量(Derived variables) #

这些 变量 的值是其他变量的引用。

Name Type Default value Computed value
Name Type Default value Computed value
$primary color $turquoise hsl(171, 100%, 41%)
$info color $cyan hsl(204, 71%, 53%)
$success color $green hsl(141, 53%, 53%)
$warning color $yellow hsl(48, 100%, 67%)
$danger color $red hsl(348, 86%, 61%)
$light color $white-ter hsl(0, 0%, 96%)
$dark color $grey-darker hsl(0, 0%, 21%)
$orange-invert color findColorInvert($orange) #fff
$yellow-invert color findColorInvert($yellow) rgba(0, 0, 0, 0.7)
$green-invert color findColorInvert($green) #fff
$turquoise-invert color findColorInvert($turquoise) #fff
$cyan-invert color findColorInvert($cyan) #fff
$blue-invert color findColorInvert($blue) #fff
$purple-invert color findColorInvert($purple) #fff
$red-invert color findColorInvert($red) #fff
$primary-invert color findColorInvert($primary) #fff
$primary-light compound findLightColor($primary)
$primary-dark compound findDarkColor($primary)
$info-invert color findColorInvert($info) #fff
$info-light compound findLightColor($info)
$info-dark compound findDarkColor($info)
$success-invert color findColorInvert($success) #fff
$success-light compound findLightColor($success)
$success-dark compound findDarkColor($success)
$warning-invert color findColorInvert($warning) #fff
$warning-light compound findLightColor($warning)
$warning-dark compound findDarkColor($warning)
$danger-invert color findColorInvert($danger) #fff
$danger-light compound findLightColor($danger)
$danger-dark compound findDarkColor($danger)
$light-invert color findColorInvert($light) #fff
$dark-invert color findColorInvert($dark) #fff
$scheme-main color $white hsl(0, 0%, 100%)
$scheme-main-bis color $white-bis hsl(0, 0%, 98%)
$scheme-main-ter color $white-ter hsl(0, 0%, 96%)
$scheme-invert color $black hsl(0, 0%, 4%)
$scheme-invert-bis color $black-bis hsl(0, 0%, 7%)
$scheme-invert-ter color $black-ter hsl(0, 0%, 14%)
$background color $white-ter hsl(0, 0%, 96%)
$border color $grey-lighter hsl(0, 0%, 86%)
$border-hover color $grey-light hsl(0, 0%, 71%)
$border-light color $grey-lightest hsl(0, 0%, 93%)
$border-light-hover color $grey-light hsl(0, 0%, 71%)
$text color $grey-dark hsl(0, 0%, 29%)
$text-invert color findColorInvert($text) #fff
$text-light color $grey hsl(0, 0%, 48%)
$text-strong color $grey-darker hsl(0, 0%, 21%)
$code color $red hsl(348, 86%, 61%)
$code-background color $background hsl(0, 0%, 96%)
$pre color $text hsl(0, 0%, 29%)
$pre-background color $background hsl(0, 0%, 96%)
$link color $blue hsl(217, 71%, 53%)
$link-invert color findColorInvert($link) #fff
$link-light compound findLightColor($link)
$link-dark compound findDarkColor($link)
$link-visited color $purple hsl(271, 100%, 71%)
$link-hover color $grey-darker hsl(0, 0%, 21%)
$link-hover-border color $grey-light hsl(0, 0%, 71%)
$link-focus color $grey-darker hsl(0, 0%, 21%)
$link-focus-border color $blue hsl(217, 71%, 53%)
$link-active color $grey-darker hsl(0, 0%, 21%)
$link-active-border color $grey-dark hsl(0, 0%, 29%)
$family-primary font-family $family-sans-serif BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif
$family-secondary font-family $family-sans-serif BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif
$family-code font-family $family-monospace monospace
$size-small size $size-7 0.75rem
$size-normal size $size-6 1rem
$size-medium size $size-5 1.25rem
$size-large size $size-4 1.5rem
$custom-colors keyword null
$custom-shades keyword null
$colors function mergeColorMaps(("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert, $primary-light, $primary-dark), "link": ($link, $link-invert, $link-light, $link-dark), "info": ($info, $info-invert, $info-light, $info-dark), "success": ($success, $success-invert, $success-light, $success-dark), "warning": ($warning, $warning-invert, $warning-light, $warning-dark), "danger": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors)
$shades function mergeColorMaps(("black-bis": $black-bis, "black-ter": $black-ter, "grey-darker": $grey-darker, "grey-dark": $grey-dark, "grey": $grey, "grey-light": $grey-light, "grey-lighter": $grey-lighter, "white-ter": $white-ter, "white-bis": $white-bis), $custom-shades)
$sizes map $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7

通用变量(Generic variables) #

你可以使用下面的通用变量 进行常规 定制. 在导入Bulma之前简单的设置他们中的一个或多个即可。

Name Type Default value Computed value
Name Type Default value Computed value
$body-background-color color $scheme-main hsl(0, 0%, 100%)
$body-size size 16px
$body-min-width size 300px
$body-rendering keyword optimizeLegibility
$body-family font-family $family-primary BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif
$body-overflow-x string hidden
$body-overflow-y string scroll
$body-color color $text hsl(0, 0%, 29%)
$body-font-size size 1em
$body-weight font-weight $weight-normal 400
$body-line-height unitless 1.5
$code-family font-family $family-code monospace
$code-padding size 0.25em 0.5em 0.25em
$code-weight font-weight normal
$code-size size 0.875em
$small-font-size size 0.875em
$hr-background-color color $background hsl(0, 0%, 96%)
$hr-height size 2px
$hr-margin size 1.5rem 0
$strong-color color $text-strong hsl(0, 0%, 21%)
$strong-weight font-weight $weight-bold 700
$pre-font-size size 0.875em
$pre-padding size 1.25rem 1.5rem
$pre-code-font-size size 1em