Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature: Support CSS Custom Properties (Variables) #1837

Open
sandrina-p opened this issue Apr 28, 2018 · 20 comments
Labels

Comments

@sandrina-p
Copy link

@sandrina-p sandrina-p commented Apr 28, 2018

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

This comment has been minimized.

Copy link
Owner

@jgthms jgthms commented May 1, 2018

It’s already used for variable width columns.

You could also set it with your own Sass variables.

@jgthms jgthms closed this May 1, 2018
@sandrina-p

This comment has been minimized.

Copy link
Author

@sandrina-p sandrina-p commented May 1, 2018

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; } }
@jordanranson

This comment has been minimized.

Copy link

@jordanranson jordanranson commented Jun 5, 2018

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

@AdsonCicilioti

This comment has been minimized.

Copy link

@AdsonCicilioti AdsonCicilioti commented Sep 30, 2018

+1 CSS variables! please!

@sandrina-p

This comment has been minimized.

Copy link
Author

@sandrina-p sandrina-p commented Oct 10, 2018

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

@jgthms jgthms reopened this Oct 10, 2018
@northamerican

This comment has been minimized.

Copy link

@northamerican northamerican commented Oct 11, 2018

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

@jgthms jgthms added the pinned label Jan 21, 2019
@gamichalski

This comment has been minimized.

Copy link

@gamichalski gamichalski commented Jan 21, 2019

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

@eirikhm

This comment has been minimized.

Copy link

@eirikhm eirikhm commented Mar 25, 2019

Any updates on this?

@jgthms

This comment has been minimized.

Copy link
Owner

@jgthms jgthms commented Mar 25, 2019

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

This comment has been minimized.

Copy link

@gragland gragland commented Mar 25, 2019

@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

This comment has been minimized.

Copy link

@scriptcoded scriptcoded commented Sep 19, 2019

@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

This comment has been minimized.

Copy link

@abbassiddiqi abbassiddiqi commented Oct 8, 2019

@jgthms any updates?

@Gomah

This comment has been minimized.

Copy link
Contributor

@Gomah Gomah commented Oct 9, 2019

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

@jgthms

This comment has been minimized.

Copy link
Owner

@jgthms jgthms commented Oct 9, 2019

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

This comment has been minimized.

Copy link

@wtho wtho commented Nov 9, 2019

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

This comment has been minimized.

Copy link

@Grovkillen Grovkillen commented Nov 9, 2019

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

This comment has been minimized.

Copy link

@Grovkillen Grovkillen commented Nov 14, 2019

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

themeImport
changeLive

@Grovkillen

This comment has been minimized.

Copy link

@Grovkillen Grovkillen commented Nov 14, 2019

Screenshots of two different settings.

2019-11-14 14 46 52
2019-11-14 14 47 30

@Grovkillen

This comment has been minimized.

Copy link

@Grovkillen Grovkillen commented Nov 14, 2019

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
You can’t perform that action at this time.