bulma/docs/documentation/features/css-variables.md
Jeremy Thomas 69877a652c Init v1
2024-03-21 16:11:54 +00:00

1.7 KiB

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:

Inspect CSS variables

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