bulma/docs/documentation/features/css-variables.md

title	layout	markdown	theme	doc-tab	doc-subtab	breadcrumb
CSS Variables in Bulma	docs	true	features	features	css-variables	home documentation features features-css-variables

All Bulma components are styled using CSS Variables (which are also called CSS custom properties). Read more about them on the MDN Reference.

For example, here is how the .title element is styled:

.title {
  color: var(--bulma-title-color);
  font-size: var(--bulma-title-size);
  font-weight: var(--bulma-title-weight);
  line-height: var(--bulma-title-line-height);
}

Scope

Bulma CSS variables are either defined:

• at the global scope :root
• at the component scope, like .button

CSS Variables defined at a more specific scope (like .button) will override the ones defined at a more global scope.

:root {
  /* Default global value */
  --bulma-size-medium: 1.25rem;
}

.button {
  /* Overrides the global value */
  --bulma-size-medium: 1.5rem;
}

Prefix

All Bulma CSS variables are prefixed with bulma- (including the dash). You will notice theme when inspecting a webpage:

This prefix can be changed by setting the $cssvars-prefix Sass variable:

@use "bulma/sass" with (
  $cssvars-prefix: "my-prefix-"
);

Themes

The global CSS variables defined at the :root level are what defines a Bulma theme. Think of a theme as simply a collection of CSS variables.

Read more about Themes