Merged idea

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.

Styles are saved in CSS as custom variables in :root Merged

In CSS, you can assign custom properties to variables, for example:

:root {
--main-bg-color: pink;}

body {
background-color: var(--main-bg-color);}

Currently in Webflow, when you set colors or other styles, these do not appear in the CSS as variables in :root within the HTML. Instead, they style the class in question and nothing further.

This article by Dan Carter at Prism explains the benefits of variables pretty well:

At their core, CSS variables simply offer a means to manage property values from a single point. This enables quick and simple control of styles across multiple elements... One of the major benefits of CSS variables is that it allows developers to consolidate their common properties into easy to reach locations, making code more readable and easier to maintain. Whilst this is a possibility in preprocessors, leveraging the technology in the browser itself gives access to more runtime information. This opens up the ability for developers to work closer with designers to create a flexible base for design systems allowing them to focus on real work instead of balancing plates.

Adding this functionality would build on Webflow's strengths as a place to build your own site without the hassle of learning backend code. It would also expose designers to front end code, and making it easier to implement functional, reusable styles.

  • John Fallot
  • Aug 14 2022
  • Shipped