Bulma has 1 variable file divided into 4 sections:
-
Initial variables: where you define variables by direct value, like:
- colors:
$blue: hsl(217, 71%, 53%)
- font sizes:
$size-1: 3rem
- other values:
$easing: ease-out
or$radius-large: 5px
- colors:
-
Primary colors derived from the initial variables:
$primary: $turquoise
$info: $blue
$success: $green
$warning: $yellow
$danger: $red
$dark: $grey-darker
$text: $grey-dark
-
Generated variables where variables are calculated from the values set in the previous file. For example, you can have:
$body-background: $white
: the main 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))
$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.