Bulma has two variable files divided into 4 sections:
-
Initial variables: where you define variables by literal value, like:
- colors:
$blue: hsl(217, 71%, 53%)
- font sizes:
$size-1: 3rem
- dimensions:
$gap: 24px
- other values:
$easing: ease-out or $radius-large: 5px
-
Derived variables where variables are calculated from the values set in the previous file. For example, you can have:
-
Primary colors derived from the initial variables:
$primary: $turquoise$info: $blue$success: $green$warning: $yellow$danger: $red$dark: $grey-darker$text: $grey-dark
$background: $white-ter: a general background color$link: $primary: the links use the primary color$family-primary: $family-sans-serif: the primary font family is the sans-serif one-
Lists and maps which are collections so already defined variables:
$colors: (dark: ($dark, $dark-invert), primary: ($primary, $primary-invert), info: ($info, $info-invert), success: ($success, $success-invert), warning: ($warning, $warning-invert), danger: ($danger, $danger-invert))$shades: ("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)$sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6
To override any of these variables, just set them before importing Bulma.
These are variables with a literal value.
These are variables with a value that references another variable.
$primary
|
$turquoise
|
$info
|
$blue
|
$success
|
$green
|
$warning
|
$yellow
|
$danger
|
$red
|
$light
|
$white-ter
|
$dark
|
$grey-darker
|
$orange-invert
|
findColorInvert($orange)
|
$yellow-invert
|
findColorInvert($yellow)
|
$green-invert
|
findColorInvert($green)
|
$turquoise-invert
|
findColorInvert($turquoise)
|
$blue-invert
|
findColorInvert($blue)
|
$purple-invert
|
findColorInvert($purple)
|
$red-invert
|
findColorInvert($red)
|
$primary-invert
|
$turquoise-invert
|
$info-invert
|
$blue-invert
|
$success-invert
|
$green-invert
|
$warning-invert
|
$yellow-invert
|
$danger-invert
|
$red-invert
|
$light-invert
|
$dark
|
$dark-invert
|
$light
|
$background
|
$white-ter
|
$border
|
$grey-lighter
|
$border-hover
|
$grey-light
|
$text
|
$grey-dark
|
$text-invert
|
findColorInvert($text)
|
$text-light
|
$grey
|
$text-strong
|
$grey-darker
|
$code
|
$red
|
$code-background
|
$background
|
$pre
|
$text
|
$pre-background
|
$background
|
$link
|
$primary
|
$link-invert
|
$primary-invert
|
$link-visited
|
$purple
|
$link-hover
|
$grey-darker
|
$link-hover-border
|
$grey-light
|
$link-focus
|
$grey-darker
|
$link-focus-border
|
$primary
|
$link-active
|
$grey-darker
|
$link-active-border
|
$grey-dark
|
$family-primary
|
$family-sans-serif
|
$family-code
|
$family-monospace
|
$size-small
|
$size-7
|
$size-normal
|
$size-6
|
$size-medium
|
$size-5
|
$size-large
|
$size-4
|
$colors
|
("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert), "info": ($info, $info-invert), "success": ($success, $success-invert), "warning": ($warning, $warning-invert), "danger": ($danger, $danger-invert))
|
$shades
|
("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)
|
$sizes
|
$size-1 $size-2 $size-3 $size-4 $size-5 $size-6
|