List of Bulma Sass variables

All Sass variables defined by Bulma

Initial variables #

Defined at utilities/initial-variables.scss.

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, ), )`
`$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 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

Sponsor

List of Bulma Sass variables

All Sass variables defined by Bulma

Initial variables #

Derived variables #

Component variables #

How to support Bulma