Introduction Bulma’s Sass variables are the foundation of its customization system. By overriding these variables, you can control every aspect of the framework’s appearance.
Variable Categories Bulma organizes variables into two main files:
initial-variables.scss : Base values (colors, typography, spacing)derived-variables.scss : Computed values based on initial variables
Overriding Variables with @use The modern way to customize Bulma is using Sass’s @use rule with the with clause:
@use "bulma/sass/utilities" with ( $primary : hsl ( 171 , 100 % , 41 % ), $family-sans-serif : "Inter" , sans-serif , $radius : 0.5 rem ); @use "bulma/sass" as bulma ;
The old @import syntax is deprecated. Always use @use for new projects.
Color Variables Scheme Colors Control the base hue and saturation for your color scheme:
@use "bulma/sass/utilities" with ( $scheme-h : 221 , // Hue (0-360) $scheme-s : 14 % , // Saturation $dark-l : 20 % , // Dark theme lightness $light-l : 90 % // Light theme lightness );
Grayscale Colors Bulma provides a comprehensive grayscale palette:
// From darkest to lightest $black : hsl ( 221 , 14 % , 4 % ) $black-bis : hsl ( 221 , 14 % , 9 % ) $black-ter : hsl ( 221 , 14 % , 14 % ) $grey-darker : hsl ( 221 , 14 % , 21 % ) $grey-dark : hsl ( 221 , 14 % , 29 % ) $grey : hsl ( 221 , 14 % , 48 % ) $grey-light : hsl ( 221 , 14 % , 71 % ) $grey-lighter : hsl ( 221 , 14 % , 86 % ) $grey-lightest : hsl ( 221 , 14 % , 93 % ) $white-ter : hsl ( 221 , 14 % , 96 % ) $white-bis : hsl ( 221 , 14 % , 98 % ) $white : hsl ( 221 , 14 % , 100 % )
The “-bis” and “-ter” suffixes provide subtle variations for layering and depth.
Theme Colors Override Bulma’s semantic color palette:
@use "bulma/sass/utilities" with ( $orange : hsl ( 14 , 100 % , 53 % ), $yellow : hsl ( 42 , 100 % , 53 % ), $green : hsl ( 153 , 53 % , 53 % ), $turquoise : hsl ( 171 , 100 % , 41 % ), $cyan : hsl ( 198 , 100 % , 70 % ), $blue : hsl ( 233 , 100 % , 63 % ), $purple : hsl ( 271 , 100 % , 71 % ), $red : hsl ( 348 , 100 % , 70 % ) );
Derived Color Variables These are computed from initial variables in derived-variables.scss:
// Semantic colors $primary : $turquoise // Main brand color $info : $cyan // Informational messages $success : $green // Success states $warning : $yellow // Warning messages $danger : $red // Error states $light : $white-ter // Light elements $dark : $grey-darker // Dark elements // UI colors $link : $blue // Link color $text : $grey-dark // Body text $text-weak : $grey // Secondary text $text-strong : $grey-darker // Emphasized text $background : $white-ter // Page background $border : $grey-lighter // Border color $border-weak : $grey-lightest // Subtle borders
Example override:
@use "bulma/sass/utilities" ; @use "bulma/sass/utilities/derived-variables" with ( $primary : hsl ( 171 , 100 % , 41 % ), $link : hsl ( 229 , 53 % , 53 % ), $success : hsl ( 141 , 71 % , 48 % ) );
Typography Variables Font Families @use "bulma/sass/utilities" with ( $family-sans-serif : ( "Inter" , "SF Pro" , "Segoe UI" , "Roboto" , sans-serif ), $family-monospace : ( "Inconsolata" , "Hack" , "SF Mono" , "Roboto Mono" , monospace ) );
Font Sizes Bulma uses a 7-step size scale:
$size-1 : 3 rem // 48px $size-2 : 2.5 rem // 40px $size-3 : 2 rem // 32px $size-4 : 1.5 rem // 24px $size-5 : 1.25 rem // 20px $size-6 : 1 rem // 16px (base) $size-7 : 0.75 rem // 12px
Customize the scale:
@use "bulma/sass/utilities" with ( $size-1 : 3.5 rem , $size-2 : 2.75 rem , $size-3 : 2.25 rem , $size-4 : 1.75 rem , $size-5 : 1.25 rem , $size-6 : 1 rem , $size-7 : 0.875 rem );
Font Weights $weight-light : 300 $weight-normal : 400 $weight-medium : 500 $weight-semibold : 600 $weight-bold : 700 $weight-extrabold : 800
Spacing Variables Block Spacing @use "bulma/sass/utilities" with ( $block-spacing : 1.5 rem // Vertical spacing between blocks );
Container Gap @use "bulma/sass/utilities" with ( $gap : 32 px // Horizontal padding for containers );
Responsiveness Variables Breakpoints $tablet : 769 px $desktop : 1024 px // 960px + 2 * $gap $widescreen : 1216 px // 1152px + 2 * $gap $fullhd : 1408 px // 1344px + 2 * $gap
Customize breakpoints:
@use "bulma/sass/utilities" with ( $tablet : 768 px , $gap : 16 px , $desktop : 960 px + 2 * 16 px , // 992px $widescreen : 1152 px + 2 * 16 px , // 1184px $fullhd : 1344 px + 2 * 16 px // 1376px );
Enable/Disable Breakpoints @use "bulma/sass/utilities" with ( $widescreen-enabled : false, // Disable widescreen $fullhd-enabled : false // Disable fullhd );
Border Radius Variables $radius-small : 0.25 rem // 4px $radius : 0.375 rem // 6px (default) $radius-medium : 0.5 em // Relative to font size $radius-large : 0.75 rem // 12px $radius-rounded : 9999 px // Fully rounded
Example: Remove all rounded corners:
@use "bulma/sass/utilities" with ( $radius-small : 0 , $radius : 0 , $radius-medium : 0 , $radius-large : 0 , $radius-rounded : 0 );
Animation Variables @use "bulma/sass/utilities" with ( $speed : 86 ms , // Fast transitions $duration : 294 ms , // Standard animations $easing : ease-out // Timing function );
Prefix Variables Control class and CSS variable naming:
@use "bulma/sass/utilities" with ( $class-prefix : "bulma-" , // .bulma-button $cssvars-prefix : "bulma-" , // --bulma-primary $helpers-prefix : "is-" , // .is-active $helpers-has-prefix : "has-" // .has-text-centered );
Complete Example Here’s a complete customization example:
// custom-bulma.scss @use "bulma/sass/utilities" with ( // Colors $primary : hsl ( 171 , 100 % , 41 % ), $link : hsl ( 229 , 53 % , 53 % ), $success : hsl ( 141 , 71 % , 48 % ), $warning : hsl ( 48 , 100 % , 67 % ), $danger : hsl ( 348 , 100 % , 61 % ), // Typography $family-sans-serif : "Inter" , -apple-system , BlinkMacSystemFont, "Segoe UI" , sans-serif , $size-6 : 1 rem , $weight-normal : 400 , $weight-semibold : 600 , $weight-bold : 700 , // Spacing $block-spacing : 2 rem , $gap : 24 px , // Borders $radius : 0.5 rem , $radius-large : 1 rem , // Animations $speed : 100 ms , $duration : 300 ms ); @use "bulma/sass/utilities/derived-variables" with ( $background : hsl ( 0 , 0 % , 98 % ), $border : hsl ( 0 , 0 % , 90 % ) ); @use "bulma/sass" as bulma ;
Next Steps
Sass Setup Learn how to set up your build process for Sass customization
CSS Variables Discover runtime customization with CSS custom properties
