Understanding Bulma’s variables

Bulma comes with three sets of variables:

• initial variables are a collection of Sass variables that are assigned a literal value like $blue: hsl(217, 71%, 53%)
• derived variables either reference an initial variable like $link: $blue, or use a Sass function to determine their value like $green-invert: findColorInvert($green)
• component variables are specific to each Bulma element or component, and reference either a previously defined variable, or a new literal

This can create a chain. For example:

• In initial-variables.sass, the color blue uses a literal value: $blue: hsl(217, 71%, 53%)
• In derived-variables.sass, the $link color uses that shade of blue: $link: $blue
• In breadcrumb.sass, the breadcrumb items’ color use that link color: $breadcrumb-item-color: $link

This provides Bulma users with a lot of flexibility in terms of customization:

• You can update the $blue value and it will be reflected throughout the website
• Or you can set...