# How to access :root CSS Variables in Pinegrow

**URL:** https://forum.pinegrow.com/t/how-to-access-root-css-variables-in-pinegrow/3646
**Category:** Beginners
**Tags:** css
**Created:** [December 30, 2019, 8:15pm UTC](https://forum.pinegrow.com/t/how-to-access-root-css-variables-in-pinegrow/3646 "2019-12-30T20:15:05Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![TLemire](https://avatars.discourse-cdn.com/v4/letter/t/aeb1de/32.png) [@TLemire](https://forum.pinegrow.com/u/TLemire)
#### Post date: [December 30, 2019, 8:15pm UTC](https://forum.pinegrow.com/t/how-to-access-root-css-variables-in-pinegrow/3646/1 "2019-12-30T20:15:05Z")

</div>

Quick question on CSS Variables. I’ve got some html code that contains the css in a style statement within the page itself. There are css color variables within the :root element as such

:root {  
–main-white: #f0f0f0;  
–main-red: #be3144;  
–main-blue: #45567d;  
–main-gray: #303841;  
}

How does one view these variables using the style or element panes in Pinegrow or can this even be done? I cannot find where to edit these values within Pinegrow and had to edit them in VSCode. Do I have to convert to SCSS/LESS before Pinegrow can see these variables within the style or element properties panes?

Any help would be greatly appreciated.

Thanks,  
Todd Lemire

---

<div class="post-metadata">

### Author: ![TLemire](https://avatars.discourse-cdn.com/v4/letter/t/aeb1de/32.png) [@TLemire](https://forum.pinegrow.com/u/TLemire)
#### Post date: [December 30, 2019, 8:19pm UTC](https://forum.pinegrow.com/t/how-to-access-root-css-variables-in-pinegrow/3646/2 "2019-12-30T20:19:06Z")

</div>

Ok, I figured it out. Should’ve played with it a bit more before posting this question. Had to right click on the inline CSS file and choose edit. Worked like a champ.

Humbly,  
Todd Lemire