Published on | Prototyping: From UX to Front End — Medium Paul Champion

*Taken from a slighter older post from my personal website, thought I’d share it here.

Global CSS Variables have been an ‘experiment’ for a little while now, whilst gaining full browser support with both firefox and safari. We are also seeing progress towards full browser support on other browsers like chrome. You can see the browser compatibility here.

Using CSS variables

Existing ways of using CSS variables

For those who use a pre-processor such as SASS or LESS will be familiar with CSS variables. ‘Global CSS Variables’ are exactly the same, but allows you to use them in vanilla CSS.

Whether this will help lead a revolution away from pre-processors back to vanilla CSS I’m not too sure , but it’s definitely a handy feature. If you do use vanilla CSS then this will save heaps of time.

Example

The implementation requires you to declare your variables on a root element (- -brand-color: red;) and then apply the variable (var(- -brand-color)) to the required selector.

I’ve created a couple of basic codepens below with a simple ‘brand colour’ example:

<a href="https://medium.com/media/45280e3cb0d2df60a80a7fa4a5f09eb4/href">https://medium.com/media/45280e3cb0d2df60a80a7fa4a5f09eb4/href</a><a href="https://medium.com/media/78513ba47ebed72ea5c833626693af8c/href">https://medium.com/media/78513ba47ebed72ea5c833626693af8c/href</a>

You can find more information about ‘CSS Global Variables’ on the ‘Mozilla Developer Network’.

Using CSS variables

Thanks

If you liked this post, please hit both the follow and heart buttons below. You can also follow me on twitter at @paul3to to keep up to date with future posts.

What are Global CSS Variables? was originally published in prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

What are Global CSS Variables?

Cool stuff, every week

More Articles