List of Bulma Sass variables

All Sass variables defined by Bulma

Initial variables #

Defined at utilities/initial-variables.scss.

Sass and CSS variables #

Sass Variable	Value
`$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%)`
`$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%)`
`$family-sans-serif`	`"Inter", "SF Pro", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Helvetica Neue", "Helvetica", "Arial", sans-serif`
`$family-monospace`	`"Inconsolata", "Hack", "SF Mono", "Roboto Mono", "Source Code Pro", "Ubuntu Mono", monospace`
`$render-mode`	`optimizeLegibility`
`$size-1`	`3rem`
`$size-2`	`2.5rem`
`$size-3`	`2rem`
`$size-4`	`1.5rem`
`$size-5`	`1.25rem`
`$size-6`	`1rem`
`$size-7`	`0.75rem`
`$weight-light`	`300`
`$weight-normal`	`400`
`$weight-medium`	`500`
`$weight-semibold`	`600`
`$weight-bold`	`700`
`$weight-extrabold`	`800`
`$block-spacing`	`1.5rem`
`$aspect-ratios`	`( (1, 1), (5, 4), (4, 3), (3, 2), (5, 3), (16, 9), (2, 1), (3, 1), (4, 5), (3, 4), (2, 3), (3, 5), (9, 16), (1, 2), (1, 3) )`
`$gap`	`32px`
`$tablet`	`769px`
`$desktop`	`960px + 2 * $gap`
`$widescreen`	`1152px + 2 * $gap`
`$widescreen-enabled`	`true`
`$fullhd`	`1344px + 2 * $gap`
`$fullhd-enabled`	`true`
`$breakpoints`	`( "mobile": ( "until": $tablet, ), "tablet": ( "from": $tablet, ), "tablet-only": ( "from": $tablet, "until": $desktop, ), "touch": ( "from": $desktop, ), "desktop": ( "from": $desktop, ), "desktop-only": ( "from": $desktop, "until": $widescreen, ), "until-widescreen": ( "until": $widescreen, ), "widescreen": ( "from": $widescreen, ), "widescreen-only": ( "from": $widescreen, "until": $fullhd, ), "until-fullhd": ( "until": $fullhd, ), "fullhd": ( "from": $fullhd, ), )`
`$duration`	`294ms`
`$easing`	`ease-out`
`$radius-small`	`0.25rem`
`$radius`	`0.375rem`
`$radius-medium`	`0.5em`
`$radius-large`	`0.75rem`
`$radius-rounded`	`9999px`
`$speed`	`86ms`
`$variable-columns`	`true`
`$rtl`	`false`
`$class-prefix`	`""`
`$cssvars-prefix`	`"bulma-"`
`$helpers-prefix`	`"is-"`
`$helpers-has-prefix`	`"has-"`

Derived variables #

Defined at utilities/derived-variables.scss.

Sass and CSS variables #

Sass Variable	Value
`$scheme-main`	`iv.$white`
`$scheme-main-bis`	`iv.$white-bis`
`$scheme-main-ter`	`iv.$white-ter`
`$scheme-invert`	`iv.$black`
`$scheme-invert-bis`	`iv.$black-bis`
`$scheme-invert-ter`	`iv.$black-ter`
`$text`	`iv.$grey-dark`
`$text-invert`	`fn.bulmaFindColorInvert($text)`
`$text-weak`	`iv.$grey`
`$text-strong`	`iv.$grey-darker`
`$primary`	`iv.$turquoise`
`$info`	`iv.$cyan`
`$success`	`iv.$green`
`$warning`	`iv.$yellow`
`$danger`	`iv.$red`
`$light`	`iv.$white-ter`
`$dark`	`iv.$grey-darker`
`$link`	`iv.$blue`
`$background`	`iv.$white-ter`
`$border`	`iv.$grey-lighter`
`$border-weak`	`iv.$grey-lightest`
`$code`	`iv.$red`
`$code-background`	`$background`
`$pre`	`$text`
`$pre-background`	`$background`
`$family-primary`	`iv.$family-sans-serif`
`$family-secondary`	`iv.$family-sans-serif`
`$family-code`	`iv.$family-monospace`
`$size-small`	`iv.$size-7`
`$size-normal`	`iv.$size-6`
`$size-medium`	`iv.$size-5`
`$size-large`	`iv.$size-4`
`$shadow-color`	`iv.$black`
`$custom-colors`	`null`
`$custom-shades`	`null`
`$colors`	`fn.mergeColorMaps( ( "white": ( iv.$white, iv.$black, ), "black": ( iv.$black, iv.$white, ), "light": ( $light, $dark, ), "dark": ( $dark, $light, ), "text": $text, "primary": $primary, "link": $link, "info": $info, "success": $success, "warning": $warning, "danger": $danger, ), $custom-colors )`
`$shades`	`fn.mergeColorMaps( ( "black-bis": iv.$black-bis, "black-ter": iv.$black-ter, "grey-darker": iv.$grey-darker, "grey-dark": iv.$grey-dark, "grey": iv.$grey, "grey-light": iv.$grey-light, "grey-lighter": iv.$grey-lighter, "white-ter": iv.$white-ter, "white-bis": iv.$white-bis, ), $custom-shades )`
`$sizes`	`iv.$size-1 iv.$size-2 iv.$size-3 iv.$size-4 iv.$size-5 iv.$size-6 iv.$size-7`

Component variables #

For each Bulma component, the list of Sass variables is listed at the bottom of its page.

Start Here

Features

Sass Tools

Customization

CSS Library

CSS Helpers

List of Bulma Sass variables

All Sass variables defined by Bulma

Initial variables #

Sass and CSS variables #

Derived variables #

Sass and CSS variables #

Component variables #

How to support Bulma