Bulma Variables

Bulma is a free, and open-source CSS framework based on flexbox. It is component rich, compatible, and well documented. It is highly responsive in nature. It uses classes to implement its design. Variables are used to store the property and can be used in repetition on the webpage.

Advantages of a variable:

• It is used to reduce the repetition of the same thing.
• It is used to perform mathematical operations over variables like +,-,/,*, etc…, which makes our work easier.

Syntax:

$name-of-the-variable: value;

Three types of variables are:

Initial Variable: This type of variable can define variables by literal value.

Variable-Name.	Description	Type	Color
$black	This variable is used to define the black color of the element.	color	hsl(0, 0%, 4%)
$black-bis	This variable is used to define the black-bis color of the element.	color	hsl(0, 0%, 7%)
$black-ter	This variable is used to define the black-ter color of the element.	color	hsl(0, 0%, 14%)
$grey-darker	This variable is used to define the grey-darker color of the element.	color	hsl(0, 0%, 21%)
$grey-dark	This variable is used to define the grey-dark color of the element.	color	hsl(0, 0%, 29%)
$grey	This variable is used to define the grey color of the element.	color	hsl(0, 0%, 48%)
$grey-light	This variable is used to define the grey-light color of the element.	color	hsl(0, 0%, 71%)
$grey-lighter	This variable is used to define the grey-lighter of the element.	color	hsl(0, 0%, 86%)
$grey-lightest	This variable is used to define the grey-lightest color of the element.	color	hsl(0, 0%, 93%)
$white-ter	This variable is used to define the white-ter color of the element.	color	hsl(0, 0%, 96%)
$white-bis	This variable is used to define the white-bis color of the element.	color	hsl(0, 0%, 98%)
$white	This variable is used to define the white color of the element.	color	hsl(0, 0%, 100%)
$orange	This variable is used to define the orange color of the element.	color	hsl(14, 100%, 53%)
$yellow	This variable is used to define the yellow color of the element.	color	hsl(44, 100%, 77%)
$green	This variable is used to define the green color of the element.	color	hsl(153, 53%, 53%)
$turquoise	This variable is used to define the turquoise color of the element.	color	hsl(171, 100%, 41%)
$cyan	This variable is used to define the cyan color of the element.	color	hsl(207, 61%, 53%)
$blue	This variable is used to define the blue color of the element	color	hsl(229, 53%, 53%)
$purple	This variable is used to define the purple color of the element.	color	hsl(271, 100%, 71%)
$red	This variable is used to define the red color of the element.	color	hsl(348, 86%, 61%)
$family-sans-serif	This variable is used to define the font family of the element	font-family	BlinkMacSystemFont, -apple-system, “Segoe UI”,  “Roboto”, “Oxygen”, “Ubuntu”, “Cantarell”,  “Fira Sans”, “Droid Sans”, “Helvetica Neue”,  “Helvetica”, “Arial”, sans-serif
$family-monospace	This variable is used to define the monospace font of the element.	font-family	monospace
$render-mode	This variable is used to set the keyword render mode for the element.	keyword	optimizeLegibility
$size-1	This variable is used to define the size of the element by 3rem.	size	3rem
$size-2	This variable is used to define the size of the element by 2.5rem	size	2.5rem
$size-3	This variable is used to define the size of the element by 2rem.	size	2rem
$size-4	This variable is used to define the size of the element by 1.5rem.	size	1.5rem
$size-5	This variable is used to define the size of the element by 1.25rem.	size	1.25rem
$size-6	This variable is used to define the size of the element by 1rem.	size	1rem
$size-7	This variable is used to define the size of the element by 0.75rem.	size	0.75rem
$weight-light	This variable is used to define the weight of the element by 300 value.	font-weight	300
$weight-normal	This variable is used to define the weight of the element by the 400 value.	font-weight	400
$weight-medium	This variable is used to define the weight of the element by the 500 value.	font-weight	500
$weight-semibold	This variable is used to define the weight of the element by 600 value.	font-weight	600
$weight-bold	This variable is used to define the weight of the element by a value of 700.	font-weight	700
$block-spacing	This variable is used to define the spacing around the element by 1.5rem.	size	1.5rem
$gap	This variable is used to define the gap of 32px.	size	32px
$tablet	This variable is used to define the tablet-sized resolution.	size	769px
$desktop	This variable is used to define the desktop-sized resolution.	computed	960px + (2 * $gap)
$widescreen	This variable is used to define the widescreen size resolution.	computed	1152px + (2 * $gap)
$widescreen-enabled	This variable is used to enable the widescreen resolution.	boolean	true
$fullhd	This variable is used to define the fullhd-size of the element.	computed	1344px + (2 * $gap)
$fullhd-enabled	This variable is used to enable the fullhd-sized resolution.	boolean	true
$breakpoints	This variable is used to define the breakpoint for the resolution.	compound	(“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	This variable is used to define the ease-out property to the element	keyword	ease-out
$radius-small	This variable is used to define the small radius of the element.	size	2px
$radius	This variable is used to define the radius of the element.	size	4px
$radius-large	This variable is used to define the large radius of the element.	size	6px
$radius-rounded	This variable is used to define the rounded radius of the element.	size	9999px
$speed	This variable is used to define the speed of the element.	duration	86ms
$variable-columns	This variable is used to define the columns.	boolean	true
$rtl	This variable is used to define the rtl(right to left) property.	boolean	false

Derived variables: In this type of variable, we can calculate variables from the values set in the previous file.

Variable-Name.	Description	Type	Value	Computed Value	Computed Type
$primary	This variable is used to define the primary color of the element.	variable	$turquoise	hsl(171, 100%, 41%)	color
$info	This variable is used to define the info color of the element.	variable	$cyan	hsl(207, 61%,  53%)	color
$success	This variable is used to define the green color of the element.	variable	$green	hsl(153, 53%,  53%)	color
$warning	This variable is used to define the yellow color of the element.	variable	$yellow	hsl(44,  100%, 77%)	color
$danger	This variable is used to define the red color of the element.	variable	$red	hsl(348, 86%, 61%)	color
$light	This variable is used to define the white-ter color of the element	variable	$white-ter	hsl(0, 0%, 96%)	color
$dark	This variable is used to define the grey-darker color of the element.	function	$grey-darker	hsl(0, 0%, 21%)	color
$orange-invert	This variable is used to define the invert orange color of the element.	function	findColorInvert($orange)	#fff	color
$yellow-invert	This variable is used to define the inverted yellow color of the element.	function	findColorInvert($yellow)	rgba(0, 0, 0, 0.7)	color
$green-invert	This variable is used to define the inverted green color of the element.	function	findColorInvert($green)	#fff	color
$turquoise-invert	This variable is used to define the inverted turquoise color of the element.	function	findColorInvert($turquoise)	#fff	color
$cyan-invert	This variable is used to define the cyan-invert color of the element.	function	findColorInvert($cyan)	#fff	color
$blue-invert	This variable is used to define the blue-invert color of the element.	function	findColorInvert($blue)	#fff	color
$purple-invert	This variable is used to define the purple-invert color of the element.	function	findColorInvert($purple)	#fff	color
$red-invert	This variable is used to define the red-invert color of the element.	function	findColorInvert($red)	#fff	color
$primary-invert	This variable is used to define the primary-invert color of the element.	function	findColorInvert($primary)	#fff	color
$primary-light	This variable is used to define the primary-light color of the element.	compound	findLightColor($primary)
$primary-dark	This variable is used to define the primary-dark color of the element.	compound	findDarkColor($primary)
$info-invert	This variable is used to define the info-invert color of the element.	function	findColorInvert($info)	#fff	color
$info-light	This variable is used to define the info-light color of the element.	compound	findLightColor($info)
$info-dark	This variable is used to define the info dark color of the element.	compound	findDarkColor($info)
$success-invert	This variable is used to define the success-invert color of the element.	function	findColorInvert($success)	#fff	color
$success-light	This variable is used to define the	compound	findLightColor($success)
$success-dark	This variable is used to define the success-dark color of the element.	compound	findDarkColor($success)
$warning-invert	This variable is used to define the warning invert color of the element.	function	findColorInvert($warning)
$warning-light	This variable is used to define the warning light color of the element.	compound	findLightColor($warning)	#fff	color
$warning-dark	This variable is used to define the warning-dark color of the element.	compound	findDarkColor($warning)
$danger-invert	This variable is used to define the danger-invert color of the element.	function	findColorInvert($danger)	#fff	color
$danger-light	This variable is used to define the danger-light color of the element.	compound	findLightColor($danger)
$danger-dark	This variable is used to define the danger-dark color of the element.	compound	findDarkColor($danger)
$light-invert	This variable is used to define the light-invert color of the element.	function	findColorInvert($light)	#fff	color
$dark-invert	This variable is used to define the dark-invert color of the element.	function	findColorInvert($dark)	#fff	color
$scheme-main	This variable is used to define the scheme-mail color of the element.	variable	$white	hsl(0, 0%, 100%)	color
$scheme-main-bis	This variable is used to define the scheme-main-bis color of the element.	variable	$white-bis	hsl(0, 0%, 98%)	color
$scheme-main-ter	This variable is used to define the scheme-main-ter color of the element.	variable	$white-ter	hsl(0, 0%, 96%)	color
$scheme-invert	This variable is used to define the scheme-invert color of the element.	variable	$black	hsl(0, 0%, 4%)	color
$scheme-invert-bis	This variable is used to define the scheme-invert-bis color to the element.	variable	$black-bis	hsl(0, 0%, 7%)	color
$scheme-invert-ter	This variable is used to define the scheme-invert-ter color of the element.	variable	$black-ter	hsl(0, 0%, 14%)	color
$background	This variable is used to define the background color of the element.	variable	$white-ter	hsl(0, 0%, 96%)	color
$border	This variable is used to define the border color of the element.	variable	$grey-lighter	hsl(0, 0%, 86%)	color
$border-hover	This variable is used to define the border-hover color of the element.	variable	$grey-light	hsl(0, 0%, 71%)	color
$border-light	This variable is used to define the border-light color of the element.	variable	$grey-lightest	hsl(0, 0%, 93%)	color
$border-light-hover	This variable is used to define the border-light-hover color of the element.	variable	$grey-light	hsl(0, 0%, 71%)	color
$text	This variable is used to define the text color of the element.	variable	$grey-dark	hsl(0, 0%, 29%)	color
$text-invert	This variable is used to define the text-invert color of the element of the color	function	findColorInvert($text)	#fff	color
$text-light	This variable is used to define the text-light color of the element.	variable	$grey	hsl(0, 0%, 48%)	color
$text-strong	This variable is used to define the text-strong color of the element.	variable	$grey-darker	hsl(0, 0%, 21%)	color
$code	This variable is used to define the code color of the element.	compound	darken($red, 15%)
$code-background	This variable is used to define the code-background color of the element.	variable	$background	hsl(0, 0%, 96%)	color
$pre	This variable is used to define the pre color of the element.	variable	$text	hsl(0, 0%, 29%)	color
$pre-background	This variable is used to define the pre-background color of the element.	variable	$background	hsl(0, 0%, 96%)	color
$link	This variable is used to define the blue color of the element.	variable	$blue	hsl(229, 53%,  53%)	color
$link-invert	This variable is used to define the link-invert color of the element.	function	findColorInvert($link)	#fff	color
$link-light	This variable is used to define the light-dark color of the element.	compound	findLightColor($link)
$link-dark	This variable is used to define the link-dark color of the element.	compound	findDarkColor($link)
$link-visited	This variable is used to define the link-visited color of the element.	variable	$purple	hsl(271, 100%, 71%)	color
$link-hover	This variable is used to define the link-hover color of the element.	variable	$grey-darker	hsl(0, 0%, 21%)	color
$link-hover-border	This variable is used to define the grey-light color of the element.	variable	$grey-light	hsl(0, 0%, 71%)	color
$link-focus	This variable is used to define the grey-darker color of the element.	variable	$grey-darker	hsl(0, 0%, 21%)	color
$link-focus-border	This variable is used to define the blue color of the element.	variable	$blue	hsl(229, 53%,  53%)	color
$link-active	This variable is used to define the grey-darker color of the element.	variable	$grey-darker	hsl(0, 0%, 21%)	color
$link-active-border	This variable is used to define the grey-dark color of the element	variable	$grey-dark	hsl(0, 0%, 29%)	color
$family-primary	This variable is used to define the font-family of the element	variable	$family-sans-serif	BlinkMacSystemFont, -apple-system, “Segoe UI”, “Roboto”, “Oxygen”, “Ubuntu”, “Cantarell”, “Fira Sans”, “Droid Sans”, “Helvetica Neue”, “Helvetica”, “Arial”, sans-serif	font-family
$family-secondary	This variable is used to define the secondary font-family of the element.	variable	$family-sans-serif	BlinkMacSystemFont, -apple-system, “Segoe UI”, “Roboto”, “Oxygen”, “Ubuntu”, “Cantarell”, “Fira Sans”, “Droid Sans”, “Helvetica Neue”, “Helvetica”, “Arial”, sans-serif	font-family
$family-code	This variable is used to define the monospace family of the element.	variable	$family-monospace	monospace	font-family
$size-small	This variable is used to define the size of the element by 0.75rem.	variable	$size-7	0.75rem	size
$size-normal	This variable is used to define the size of the element by 1rem.	variable	$size-6	1rem	size
$size-medium	This variable is used to define the size of the element by 1.25rem.	variable	$size-5	1.25rem	size
$size-large	This variable is used to define the size of the element by 1.5rem.	variable	$size-4	1.5rem	size
$shadow	This variable is used to define the shadow of the element.	shadow	0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02)
$custom-colors	This variable is used to define the custom color of the element.	keyword	null
$custom-shades	This variable is used to define the custom shades of the element..	keyword	null
$colors	This variable is used to define the color of the element.	map	mergeColorMaps(( “white”: ($white, $black),  “black”: ($black, $white),  “light”: ($light, $light-invert),  “dark”: ($dark, $dark-invert),  “primary”: ($primary, $primary-invert, $primary-light, $primary-dark), “link”: ($link, $link-invert, $link-light, $link-dark), “info”: ($info, $info-invert, $info-light, $info-dark),  “success”: ($success, $success-invert, $success-light, $success-dark),  “warning”: ($warning, $warning-invert, $warning-light, $warning-dark),  “danger”: ($danger, $danger-invert, $danger-light, $danger-dark)),  $custom-colors)
$shades	This variable is used to define the shades of the element.	map	mergeColorMaps((“black-bis”: $black-bis, “black-ter”: $black-ter, “grey-darker”: $grey-darker, “grey-dark”: $grey-dark, “grey”: $grey, “grey-light”: $grey-light, “grey-lighter”: $grey-lighter, “white-ter”: $white-ter, “white-bis”: $white-bis), $custom-shades)
$sizes	This variable is used to define the size of the element.	map	$size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7

Generic variables: This type of variable can store a wide range that can store any kind of data, including text, numbers, dates, and arrays.

Variable-Name	Description	Type	Value	Computed Value	Computed Type
$body-background-color	This variable is used to define the background-color of the element.	variable	$scheme-main	hsl(0, 0%, 100%)	color
$body-size	This variable is used to define the body-size of the element.	size	16px
$body-min-width	This variable is used to define the min-width of the body of the element.	size	300px
$body-rendering	This variable is used to set the rendering of the body.	keyword	optimizeLegibility
$body-family	This variable is used to define the family of the body.	variable	$family-primary	BlinkMacSystemFont, -apple-system,  “Segoe UI”, “Roboto”, “Oxygen”,  “Ubuntu”, “Cantarell”, “Fira Sans”,  “Droid Sans”, “Helvetica Neue”, “Helvetica”, “Arial”, sans-serif	font-family
$body-overflow-x	This variable is used to set the overflow-x of the body.	string	hidden
$body-overflow-y	This variable is used to define the overflow-y of the body.	string	scroll
$body-color	This variable is used to define the color of the body.	variable	$text	hsl(0, 0%, 29%)	color
$body-font-size	This variable is used to define the font-size of the body.	size	1em
$body-weight	This variable is used to define the weight of the body.	variable	$weight-normal	400	font-weight
$body-line-height	This variable is used to define the line height of the body.	unitless	1.5
$code-family	This variable is used to define the font family of the element.	variable	$family-code	monospace	font-family
$code-padding	This variable is used to define the padding of the code.	size	0.25em 0.5em 0.25em
$code-weight	This variable is used to define the weight of the code.	font-weight	normal
$code-size	This variable is used to define the size of the code.	size	0.875em
$small-font-size	This variable is used to define the font-size by 0.875em.	size	0.875em
$hr-background-color	This variable is used to define the background color of the hr.	variable	$background	hsl(0, 0%, 96%)	color
$hr-height	This variable is used to define the height of the hr.	size	2px
$hr-margin	This variable is used to define the margin of the hr.	size	1.5rem 0
$strong-color	This variable is used to define the color of the strong.	variable	$text-strong	hsl(0, 0%, 21%)	color
$strong-weight	This variable is used to define the weight of the strong.	variable	$weight-bold	700	font-weight
$pre-font-size	This variable is used to define the font-size of the pre	size	0.875em
$pre-padding	This variable is used to define the padding of the pre.	size	1.25rem 1.5rem
$pre-code-font-size	This variable is used to define the font size of the pre.	size	1em

Example 1: In the below code, we will make use of the above variables to demonstrate the use of Bulma UI variables.

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
        "width=device-width,initial-scale=1">
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">
    <link rel="stylesheet" href="style.css">
    <title>Bulma Variable</title>
</head>

<body>
    <center>
        <h1 class="title" style="font-size:40px;">
            GeeksforGeeks
        </h1>

        <h3 class="subtitle">
            A computer science portal for geeks
        </h3>
    </center>
</body>

</html>

SCSS Code:

$title-size: 70px;
$title-color: green;
.title {
   color: $title-color;  
}

Compiled Code:

.title {
   color: green;
}

Output:

Example 2: In the below code, we will make use of the above variables to demonstrate the use of Bulma UI variables.

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
        "width=device-width,initial-scale=1">
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">
    <link rel="stylesheet" href="style.css">
    <title>Bulma Variable</title>
</head>

<body>
    <center>
        <h1 class="title" >
            GeeksforGeeks
        </h1>

        <h3 class="subtitle">
            A computer science portal for geeks
        </h3>
    </center>
</body>
</html>

SCSS Code:

$title-size: 60px;
$title-color:green;
.title {
      font-size:$title-size;
      color:$title-color;
}

Compiled CSS Code:

.title {
    font-size: 60px;
    color: green; 
}

Output: 

Reference: https://bulma.io/documentation/customize/variables/#generic-variables