Search code examples
csssassbulma

How to modify CSS variables in Bulma?

I am using bulma.css which has CSS variables as seen here

// Override initial variables here
// You can add new ones or update existing ones:

$blue: #72d0eb // Update blue
$pink: #ffb3b3 // Add pink
$family-serif: "Georgia", serif // Add a serif family

// Override generated variables here
// For example, by default, the $danger color is $red and the font is sans-serif
// You can change these values:

$danger: $orange // Use the existing orange
$family-primary: $family-serif // Use the new serif family

These need to be modified with Sass, but I am not using any CSS preprocessor, so how can I modify the variables without altering the main CSS files and doing override?

Solution

  • CSS doesn't have variables. You cannot edit the variables without using a preprocessor or editing each value one by one (what a variable in SASS would usually do).