Using variables in CSS -

is there/what best way set variable in css stylesheet cross browser compatible?

i want set

color: #123456; 

into variable since using in numerous different spots , if choose change colour want change.

css variables thing browser has support @ time mozilla.

alternative options:

• use javascript and/or server-side language set variables in css file programatically.
• use css preprocessor sass. allows create variables. have re-deploy css each time.
• consider handling colors different way in markup.

regarding last one, instead of hardcoding color elements style:

<div class="thiselement"></div>  .thiselement {     font-size: 13px     background: red;     color: #123456; } 

consider using classes instea:

<div class="thiselement color1"></div>  .thiselement {     font-size: 13px     background: red; }  .color1 {     color: #123456; } 

that way need declare color once in style sheet. 'object oriented css'. idea instead of applying monolithic style declarations each dom object, instead declare 'snippets' of style bunch of separate classes, assign separate classes see fit each dom object.

in sense, you've turned class name, itself, variable. declare in css once, use many times needed in html.