#css variable

CSS variables have been a thing for many years. Some of us may even recall the days of parsing CSS files as PHP to replace values. More recently (thankfully) we've employed more sane methods of abstracting values to variables by employing preprocessors such as SASS and mixin libraries like Bourbon.

With the advent of version 31, Firefox now supports native css variables out of the box. The syntax feels a bit clunky, but it's a huge step in the right direction.

If you have the latest and greatest from Firefox, you should see a pretty, styled version of Jan Reimers’ CodePen example below.

See the Pen CSS Variables in Firefox 31 - new syntax by Jan Reimers (@reimersjan) on CodePen.

Can you use it in the wild yet? Not really as Firefox is the only browser which supports CSS variables at this time, but watch this space.

Bonus tip

Like me, you probably implemented box-sizing: border-box the moment you learned about it, there was much rejoicing and you never looked back.

Recently I learned this little trick which uses inherit instead of simply making all page elements border-box by default. The benefit of this is that if you need a section of elements to be content-box (maybe you have a retro plugin, or maybe you just hate yourself) then you only need set that value on the outermost element of that section of markup and all the child elements are back to content-box too!

// Old school *, *:before, *:after { box-sizing: border-box; } // New hotness! html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; }

See the Pen eLaht by Andy Westmoreland (@awestmoreland) on CodePen.