This idea has been merged into another idea. To comment or vote on this idea, please visit WEBFLOW-I-3368 Global Swatches 2.0 & CSS Variables.
Ability to add a color, size or font variable to make it easier to manage a color scheme, sizing elements or typography
Webflow has color swatches you can make which changes all associated colors with that swatch in the designer. It's definitely helpful but if webflow were to take one more step and implement it into actual CSS style variables on code export, that'd be awesome.
With some code tinkering, they could do something like color swatches in the webflow designer be declared at the top of the CSS styles sheet like:
:root{ --NameOfTheColorSwatchTheUserCreated: CustomColorUserChose}
.div1 {color: var(--NameOfTheColorSwatchTheUserCreated)}
.div2 {background-color: var(--NameOfTheColorSwatchTheUserCreated)}
Right now, the code is exported as:
.div1 {color: #000}
.div2 {color: #000}
Great idea – Constantly wishing I had variables available for things like box-shadow, typography.
Related:
Global Variables: https://wishlist.webflow.com/ideas/WEBFLOW-I-1379
Symbol Variables: https://wishlist.webflow.com/ideas/WEBFLOW-I-1558
For something as powerful as Webflow, this is seriously important to have. It helps establish a global design system. I'd love to see this and more. The more variables we can have the better.
Using the new -/+class interaction to the body on click might work for this.
I'd like this, and to take it further: UI to warn about any places that I'm not using the spacings that I set up.
Not sure if it's related to this, but for true responsiveness, I'd like to be able to control font size based on element width, as in Flowtype.js: http://simplefocus.com/flowtype/
This would be really cool to have (and really time savvy)! A great feature for those making style guides in Webflow.
i am waiting so long for this.. !
I find this really important.