Feature: Support CSS Custom Properties (Variables)

[sandrina-p]

Overview of the problem

This is about the Bulma CSS framework

I'm using Bulma version 7.0.0

I am sure this issue is not a duplicate?

Request:

I've noticed it's on Bulma road v1 the support to CSS Variables. Do you have in mind a deadline for it?
Thank you.

[jgthms]

It’s already used for variable width columns.

You could also set it with your own Sass variables.

[sandrina-p]

Not really. If I want $primary to be var(--primary), being --primary #008080 it doesn't work.

>> Error: argument `$color` of `darken($color, $amount)` must be a color
>>         on line 104 of node_modules/bulma/sass/base/helpers.sass, in function `darken`
>>         from line 104 of node_modules/bulma/sass/base/helpers.sass
>>         from line 5 of node_modules/bulma/sass/base/_all.sass
>>         from line 5 of frontend/simple/sass/bulma_overrides/base/_index.scss
>>         from line 3 of frontend/simple/sass/bulma_overrides/index.scss
>>         from line 9 of frontend/simple/sass/main.sass
>> >>       color: darken($color, 10%) !important; } }

[Grovkillen]

Totally agree with OP.

https://caniuse.com/#search=custom%20properties

http://lea.verou.me/2016/09/autoprefixing-with-css-variables/

https://www.youtube.com/watch?v=2an6-WVPuJU

[jordanranson]

+1 Would also like to be able to use CSS variables when customizing Bulma.

[AdsonCicilioti]

+1 CSS variables! please!

[sandrina-p]

This issue was closed, can you @jgthms open it again and Maybe add the label needs work and feature ?

[northamerican]

CSS variables are reactive and would be much easier to use, especially with frameworks that currently have you load Sass variables first so they can be reused anywhere in the app (like Nuxt)
+1

[gamichalski]

+1 CSS variables please! it's perfect!!!

[eirikhm]

Any updates on this?

[jgthms]

I’m trying to find a way to make both Sass variables and CSS variables coexist. It seems that some developers only want the former, some the latter, and some a mix of both.

There’s a few ways to handle this. For example the Sass variables could be transformed into CSS ones. Or Sass ones could reference CSS ones. Anyway, I’m still looking to find a way that doesn’t break existing setups and that is modular enough for developers to choose their own way of coding.

[gragland]

@jgthms I love the idea of Sass being transformed into CSS vars so you can choose the level of abstraction you want to override 1) Sass, more powerful with its functions, nice if you want to override a lot of things, add new breakpoints, etc 2) CSS vars if you want to avoid a build step and/or you don't need to override too much. In my case, I'm working on a visual code editor that uses Bulma as the default UI Kit, and it would be really powerful if my tool could only override SASS when necessary, but update CSS vars in most cases. The 3-5 second Sass compilation time (done client-side) really slows things down. Just my 2 cents.

[scriptcoded]

@jgthms Wouldn't this cause a problem with methods such as lighten or rgba? In my head this creates an issue with assigning SCSS variables CSS variable values, since the SCSS calculations are done before the CSS variables are even defined. Of course this wouldn't be a problem if the last step after assigning all SCSS variables would be to generate the CSS variables.

[abbassiddiqi]

@jgthms any updates?

[Gomah]

There's a branch here, "in progress" in the Road to v1 project, wait & see 😄

[jgthms]

Yes that branch is like a playground for me to try out different ways to support CSS variables. It's mostly the darken() and lighten() Sass functions that are hard to replicate. I found a way but it's not the simplest.

[wtho]

I gave it a try to automate the process: bulma-css-vars | Demo

For each sass function call it creates a new variable, e. g.:

$green: var(--green)
color: darken(findDarkColor($green), 5%)

// becomes
color: var(--green--dark-color--500--darken)

I also added some logic in js to automatically calculate all of these derived variables. If you include a js part of bulma-css-vars in your website as well, you can update a variable and all its derived variables using a function:

updater.updateVarsInDocument('black', '#553292');

The tricky part for me was to only render the required variables as css variables, not all of them by default to avoid bloating up the styles. bulma-css-vars also uses the original bulma source and only overrides functions in utilities/functions.sass.

IMHO a pure sass/css solution would not be possible, as so many styles are derived from others (like shades of buttons / inverted colors for button labels) and there are no CSS functions available to do this in the browser without JS.

bulma-css-vars is a proof of concept, feel free take any inspiration from my work to bring this issue forward. It also currently only works with colors (I think)
Cheers!

related: #1775

[Grovkillen]

I got tired of waiting so I created my own framework. It is used for creating the new GUI of the open source (IoT) operating system named ESP Easy. I will release it when I have the entire SPA (single page application) done.

[Grovkillen]

Here's a preview of my framework including a theme creator / importer / tweaker.

[Grovkillen]

Screenshots of two different settings.

[Grovkillen]

The only thing I'm missing now is to have a CSS styling of icons (see my suggestion here: https://discourse.wicg.io/t/icon-semantic-html-element-icon/3915).

That way I could also make the icons follow the "button radius" variable and become sharper/rounder accordingly.