Till now if you wanted to use Variables in CSS you’d have to use some kind of pre-processor like SCSS etc. However CSS and major browsers now support Css Variables, technically called CSS properties. Custom property support in browsers As of March 2018, about 86% of all browsers support the CSS variables, the only noteworthy exception being IE11 (though Edge still supports it). But since when did we start worrying IE? Check out: https://caniuse.com/#feat=css-variables How to use CSS variables :root { --headings-font-family: "Times New Roman", Times, serif; } As you can see we’ve just declared a CSS variable headings-font-family. However strictly speaking for all purposes and intents, it’s going to be used and referred to as --headings-font-family; note the preceding double dashes. We’ll come back to the :root part in a little while. And here’s how you’d use it: h2 { font-family: var(--headings-font-family); } Note that the variable is called […] [Click to read the full article »]

The post CSS Variables — How To Use Css Custom Properties has been published by Binary Turf.