CSS Variables in FireFox


April 01, 2015

Finally played around with CSS variables in FireFox yesterday. I have to say it's kinda awesome. As I was understanding the syntax I kept wondering when we'd ditch all the preprocessors—but I don't think we ever will. I think we'll probably always use preprocessing (or task runners) for code linting, concatenation, and minification. I'm pretty excited about the idea we can go back to using regular css again. As the language and browser support evolves we'll have an easier time writing styles.

Here's a pattern I worked on yesterday. At the time of this writing only FireFox has implemented CSS Variables.

  :root {
    --theme-primary: #50b6f6;
    --theme-secondary: #4c88ae;
    --theme-tertiary: #c5ced4;
  }
  .theme-secondary {
    color: white;
    background-color: var(--theme-secondary);
  }

See the Pen CSS Variables - FF only by Jason Weaver (@indyplanets) on CodePen.

Latest Thoughts

Thanks for stopping by!