Bulma has two variable files divided into 4 sections:
-
Initial variables: where you define variables by literal value, like:
- colors:
$blue: hsl(229, 53%, 53%) - font sizes:
$size-1: 3rem - dimensions:
$gap: 32px - other values:
$easing: ease-outor$radius-large: 6px
- colors:
-
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$link: $blue$info: $cyan$success: $green$warning: $yellow$danger: $red$dark: $grey-darker$text: $grey-dark
$background: $white-ter: a general background color$link: $blue: 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 of already defined variables:
$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
-
Primary colors derived from the initial variables:
To override any of these variables, just set them before importing Bulma.
