Use Bulma w/ variable customization in FileZilla

I have a site running on FileZilla. I want to use Bulma in it, which I can via unpkg. My problem is that my site has a different color scheme then Bulma's Turquoise one. Is there a way that I can change the color scheme either:

Without SASS, in pure CSS
With SASS running with my FileZilla

From my understanding of SASS, isn't it just a pre-compiler that ends up w/ pure CSS anyways? If so, then can I change the color variables in pure CSS?

Thanks

Solution

Bulma uses Sass variables (see their documentation) at the heart of the framework. Yes, the Sass code is compiled into pure CSS but each of those variables is injected into numerous CSS statements when that happens.

So as far as I know, no, there's not a good way to customize Bulma without using Sass. But just because you're using FileZilla doesn't mean you can't use Sass on your own computer to set, say, the $primary variable to a new color, compile it to CSS, and upload the result to FileZilla.

This is all described nicely here: https://bulma.io/documentation/customize/with-sass-cli/

If you really don't want to go the Sass route, you can always manually style every element over again after you import Bulma. But this will likely prove unwieldy very quickly.

Quick, probably incomplete, example for .button:

<!doctype html>
<html class="no-js" lang="en">
<head>
  <link href="https://unpkg.com/bulma@0.5.3/css/bulma.css" rel="stylesheet">
  <style>
  .button.is-primary {
    background-color: red;
  }
  .button.is-primary:active,
  .button.is-primary.is-active {
    background-color: red;
  }
  .button.is-primary:hover {
    background-color: purple;
  }
  </style>
</head>
<body style="margin: 2rem auto">
<div style="text-align:center">
<button class="button is-primary">
Save
</button>
</div>
</body>
</html>