Variable Management Area (allow Bricks to manage css variables)

This request is related to feature request:

Since the above request is on the roadmap already, if this related feature request gets approved it would make sense to implement it at this point.

Since Bricks is a css class first builder and already manages classes created in the editor, I think it would be extremely useful for the same functionality to exist for css variables.

Currently I define my css variables in a code snippet plugin.

As I style the site I end up finding situations where a variable I have already setup and named can be used in other areas of the site. The problem is the variable should be renamed to better reflect what it is for. Currently the only way to do this is manually changing every place the variable is used which can become time consuming and difficult to remember exactly where it is all used.

To me it would make sense to have bricks manage variables defined in the editor the same way it does classes (Bricks assigns classes an internal ID and manages them that way). This feature request is a little more work though as the Bricks editor fields would have to deal with hard coded values (like 3em) along with regular css variables (that could come from other plugins like ACSS and WPCodebox) and then the Bricks managed variables. This would also cause the Editor to become heavier since it would also now have to manage variables along with classes internally (should be a lot less variables though…)

Having a single source of truth in Bricks where I can go and see a list of variables and update the values (whether they are calcs or single values) and mange them as needed (name change, etc.) would make keeping the site styling consistent much easier. It also makes sense since logically, css classes and variables are related and intertwined with each other.

5 Likes