变量(Variables)

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

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

  1. 初始化变量(Initial variables): 使用字面值来定义它, 比如:
    • 颜色(colors): $blue: hsl(229, 53%, 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(44, 100%, 77%)
$green color hsl(153, 53%, 53%)
$turquoise color hsl(171, 100%, 41%)
$cyan color hsl(207, 61%, 53%)
$blue color hsl(229, 53%, 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
$breakpoints compound ("mobile": ("until": $tablet), "tablet": ("from": $tablet), "tablet-only": ("from": $tablet, "until": $desktop), "touch": ("from": $desktop), "desktop": ("from": $desktop), "desktop-only": ("from": $desktop, "until": $widescreen), "until-widescreen": ("until": $widescreen), "widescreen": ("from": $widescreen), "widescreen-only": ("from": $widescreen, "until": $fullhd), "until-fullhd": ("until": $fullhd), "fullhd": ("from": $fullhd))
$easing keyword ease-out
$radius-small size 2px
$radius size 4px
$radius-large size 6px
$radius-rounded size 9999px
$speed duration 86ms
$variable-columns boolean true
$rtl boolean false

派生变量(Derived variables) #

Name
Type
Value
Computed Value
Computed Type 
$primary
variable
$turquoise
hsl(171, 100%, 41%)
color
$info
variable
$cyan
hsl(207, 61%,  53%)
color
$success
variable
$green
hsl(153, 53%,  53%)
color
$warning
variable
$yellow
hsl(44,  100%, 77%)
color
$danger
variable
$red
hsl(348, 86%, 61%)
color
$light
variable
$white-ter
hsl(0, 0%, 96%)
color
$dark
variable
$grey-darker
hsl(0, 0%, 21%)
color
$orange-invert
function
findColorInvert($orange)
#fff
color
$yellow-invert
function
findColorInvert($yellow)
rgba(0, 0, 0, 0.7)
color
$green-invert
function
findColorInvert($green)
#fff
color
$turquoise-invert
function
findColorInvert($turquoise)
#fff
color
$cyan-invert
function
findColorInvert($cyan)
#fff
color
$blue-invert
function
findColorInvert($blue)
#fff
color
$purple-invert
function
findColorInvert($purple)
#fff
color
$red-invert
function
findColorInvert($red)
#fff
color
$primary-invert
function
findColorInvert($primary)
#fff
color
$primary-light
compound
findLightColor($primary)
$primary-dark
compound
findDarkColor($primary)
$info-invert
function
findColorInvert($info)
#fff
color
$info-light
compound
findLightColor($info)
$info-dark
compound
findDarkColor($info)
$success-invert
function
findColorInvert($success)
#fff
color
$success-light
compound
findLightColor($success)
$success-dark
compound
findDarkColor($success)
$warning-invert
function
findColorInvert($warning)
#fff
color
$warning-light
compound
findLightColor($warning)
$warning-dark
compound
findDarkColor($warning)
$danger-invert
function
findColorInvert($danger)
#fff
color
$danger-light
compound
findLightColor($danger)
$danger-dark
compound
findDarkColor($danger)
$light-invert
function
findColorInvert($light)
#fff
color
$dark-invert
function
findColorInvert($dark)
#fff
color
$scheme-main
variable
$white
hsl(0, 0%, 100%)
color
$scheme-main-bis
variable
$white-bis
hsl(0, 0%, 98%)
color
$scheme-main-ter
variable
$white-ter
hsl(0, 0%, 96%)
color
$scheme-invert
variable
$black
hsl(0, 0%, 4%)
color
$scheme-invert-bis
variable
$black-bis
hsl(0, 0%, 7%)
color
$scheme-invert-ter
variable
$black-ter
hsl(0, 0%, 14%)
color
$background
variable
$white-ter
hsl(0, 0%, 96%)
color
$border
variable
$grey-lighter
hsl(0, 0%, 86%)
color
$border-hover
variable
$grey-light
hsl(0, 0%, 71%)
color
$border-light
variable
$grey-lightest
hsl(0, 0%, 93%)
color
$border-light-hover
variable
$grey-light
hsl(0, 0%, 71%)
color
$text
variable
$grey-dark
hsl(0, 0%, 29%)
color
$text-invert
function
findColorInvert($text)
#fff
color
$text-light
variable
$grey
hsl(0, 0%, 48%)
color
$text-strong
variable
$grey-darker
hsl(0, 0%, 21%)
color
$code
compound
darken($red, 15%)
$code-background
variable
$background
hsl(0, 0%, 96%)
color
$pre
variable
$text
hsl(0, 0%, 29%)
color
$pre-background
variable
$background
hsl(0, 0%, 96%)
color
$link
variable
$blue
hsl(229, 53%,  53%)
color
$link-invert
function
findColorInvert($link)
#fff
color
$link-light
compound
findLightColor($link)
$link-dark
compound
findDarkColor($link)
$link-visited
variable
$purple
hsl(271, 100%, 71%)
color
$link-hover
variable
$grey-darker
hsl(0, 0%, 21%)
color
$link-hover-border
variable
$grey-light
hsl(0, 0%, 71%)
color
$link-focus
variable
$grey-darker
hsl(0, 0%, 21%)
color
$link-focus-border
variable
$blue
hsl(229, 53%,  53%)
color
$link-active
variable
$grey-darker
hsl(0, 0%, 21%)
color
$link-active-border
variable
$grey-dark
hsl(0, 0%, 29%)
color
$family-primary
variable
$family-sans-serif
BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif
font-family
$family-secondary
variable
$family-sans-serif
BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif
font-family
$family-code
variable
$family-monospace
monospace
font-family
$size-small
variable
$size-7
0.75rem
size
$size-normal
variable
$size-6
1rem
size
$size-medium
variable
$size-5
1.25rem
size
$size-large
variable
$size-4
1.5rem
size
$shadow
shadow
0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02)
$custom-colors
keyword
null
$custom-shades
keyword
null
$colors
map
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
map
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) #

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