Title: Support for CSS variables
Last modified: June 21, 2022

---

# Support for CSS variables

 *  Anonymous User 20238576
 * (@anonymized-20238576)
 * [3 years, 11 months ago](https://wordpress.org/support/topic/support-for-css-variables/)
 * Hello,
 * I am used to create my own CSS variables for fluid typography, spacing and also
   for generating color shades. The advantage of this method is that it takes a 
   lot of work off my shoulders because I don’t have to fiddle around responsive
   breakpoints that much. Font sizes and spacing is already taken care for me this
   way.
 * So this is more of a feature request than a support question.
 * 1. Would it be possible to input custom values inside padding/margin block editor
   options? Specifically, I would like to input a CSS variable for responsive spacing,
   for example – `padding-bottom: var(--space-m)` right inside the gutenberg editor(
   For example: Container -> Spacing -> Padding).
 * 2. Same goes for typography (font-size) option. It would be very nice if I could
   set the CSS variable for fluid font sizes directly in gutenberg editor (Typography-
   > Font size).
 * 3. As for the colors, currently I can write the CSS variable right inside the
   color picker instead of HEX value. There is just one issue: the color inside 
   color picker doesn’t reflect the CSS color variable. So, for example if I write`
   var(--color-p-500)`, the color picker can’t seem to detect the exact color inside
   gutenberg editor. On the front-end, it works.
 * 4. As of now, the workaround for my first 2 points (fluid typography and spacing)
   seems to be to apply a custom class to the given element, and specify the typography/
   or spacing values inside CSS customizer. So, for example, if I would like to 
   apply responsive padding for container, I would apply a custom class to it in
   gutenberg editor (for example `.container__spacing`) and then in CSS customizer
   I would apply a `padding: var(--space-m)` for the class `.container__spacing`
 * 5. Also, it would be nice if any custom CSS set in customizer would be actually
   reflected in Gutenberg editor. Right now, if I set the custom padding values 
   to container (what I mentioned above), the padding is not reflected in gutenberg
   editor, but it works on frontend though.
 * Thank you!
    -  This topic was modified 3 years, 11 months ago by Anonymous User 20238576.
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fsupport-for-css-variables%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 1 replies (of 1 total)

 *  [fernandoazarcon2](https://wordpress.org/support/users/fernandoazarcon2/)
 * (@fernandoazarcon2)
 * [3 years, 11 months ago](https://wordpress.org/support/topic/support-for-css-variables/#post-15758814)
 * Hi @tomanuel,
 * You could raise a Feature request in our Github repository as well: [https://github.com/tomusborne/generateblocks/issues](https://github.com/tomusborne/generateblocks/issues)
 * For number 5, this is doable if you’re using a Child theme. Here’s Tom’s instructions
   with regards to this: [https://generatepress.com/forums/topic/custom-styles-not-showing-in-gutenberg/#post-808814](https://generatepress.com/forums/topic/custom-styles-not-showing-in-gutenberg/#post-808814)
 * Hope this clarifies! Thank you for sharing you insights and recommendations as
   well!

Viewing 1 replies (of 1 total)

The topic ‘Support for CSS variables’ is closed to new replies.

 * ![](https://ps.w.org/generateblocks/assets/icon.svg?rev=3239461)
 * [GenerateBlocks](https://wordpress.org/plugins/generateblocks/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/generateblocks/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/generateblocks/)
 * [Active Topics](https://wordpress.org/support/plugin/generateblocks/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/generateblocks/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/generateblocks/reviews/)

 * 1 reply
 * 2 participants
 * Last reply from: [fernandoazarcon2](https://wordpress.org/support/users/fernandoazarcon2/)
 * Last activity: [3 years, 11 months ago](https://wordpress.org/support/topic/support-for-css-variables/#post-15758814)
 * Status: not resolved