Skip to content

Instantly share code, notes, and snippets.

@Turbulentarius
Created February 28, 2025 03:18
Show Gist options
  • Save Turbulentarius/6816cdeb60b2085cfe121034025df382 to your computer and use it in GitHub Desktop.
Save Turbulentarius/6816cdeb60b2085cfe121034025df382 to your computer and use it in GitHub Desktop.
Customize Bulma with Sass

I struggled for hours trying to figure out how to customize Bulma. Here's a quick solution.

You need to verify that the variable you are trying to change exists in the component you are including. For example, click on it in VSC and inspect its code if needed.

To change the hover color of the breadcrumb component:

@use "bulma/sass/components" with (
  $breadcrumb-item-hover-color: #1447e6
);

Of course, you can also use plain CSS, which, in many cases, is preferred:

a:link {color: #0000ff;}
a:visited {color: #800080;}
a:hover {color: #ff0000;}
a:active {color: #ff00ff;}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment