#How can I define colors as variables in CSS?
\n#define a color and use it as a vriable in css<\/p>\n
Example CSS file<\/p>\n
:root {
\n –theme-color:#c6b080;
\n}<\/p>\n
#foo {
\n color: var(–theme-color);
\n}
\n#client {
\n padding-left: 6px;
\n border-left: 6px solid var(–theme-color);
\n float: left;
\n}<\/p>\n
For a working example, please see this JSFiddle (the example shows one of the CSS selectors in the fiddle has the color hard coded to blue, the other CSS selector uses CSS variables, both original and current syntax, to set the color to blue).<\/p>\n
Manipulating a CSS variable in JavaScript\/client side<\/p>\n
document.body.style.setProperty(‘–main-color’,”#6c0″)
\nSupport is in all the modern browsers<\/p>\n
Firefox 31+, Chrome 49+, Safari 9.1+, Microsoft Edge 15+ and Opera 36+ ship with native support for CSS variables.<\/p>\n","protected":false},"excerpt":{"rendered":"
#How can I define colors as variables in CSS? #define a color and use it as a vriable in css Example CSS file :root { … <\/p>\n