Color define into css

Question

I need create a static list of color definitions into css file. Like this:

.color_test: #00ff00;

And use this definition in other classes, like this:

background-color: .color_test; 

It's possible using only css?

Answer 1

That's not possible in CSS. To be able to define re-usable values in variables you'll need to look into using something like LESS or SASS which is then 'complied' into CSS.

Answer 2

Mozilla Firefox > v30 only

In Firefox version greater 30 such a feature, called CSS variables is implemented and works fine. Unfortunetaly no other browser currently supports this feature (see canIUse for supprt details).

The Mozilla Developer Network gives a comprehensive manual for the feature.

Variables are declared within standard CSS selectors:

element {
  --main-bg-color: brown;
}

and get applied accrodingly:

element {
  background-color: var(--main-bg-color);
}

You might also have a look at the W3C definition of Cascading Variables.

---

But as long as this feature is not widely impemented you need use a CSS preprocessor like LESS or SASS for emulating such a behaviour.

LESS

LESS variables can also be set outside of CSS selectors:

@any-green-color: #12FF10;

element {
    color:@any-green-color;
}

Furthermore LESS variables may hold a lot of other awesome information (see LESS documentation for details)

Answer 3

This is not possible in CSS. This style possible in LESS or SASS.

Answer 4

This is one of the short comings of straight CSS. You can't define variables. Check out Sass. It's easy and quick to learn. You'll be up and running within 1/2 day and I think it'll save some headaches down the road.

Answer 5

I wanted to be able to do this with js, and change the valued of the defined colors arbritrarily, so I made this.

It watches where it modifies the css so it isn't constantly searching through it once it's found its targets.

The issue with it is that is currently only works for style elements, which can probably be changed pretty easily.

var colorWheel = ["#F8F", "#333", "#A68", "green", "orange", "rgba(0,0,0,0.5)"]

function randomColor() {
  var color = colorWheel[~~(Math.random() * colorWheel.length)];
  StyleVars.setVar('testColor', color);
}



/************************
 *  Style Vars CSS Hack
 *  by: Seph Reed
 *
 *
 *   A js way to replace keywords with values in style elements, at your leisure.
 *   Keeps track of insertion points to allow updates to key/value pairs without 
 *   researching the entire style element
 *
 *************************/


StyleVars = {};
StyleVars.rules = {};
StyleVars.rules["lightShadow"] = "rgba(0,0,0,0.1)";
StyleVars.rules["medShadow"] = "rgba(0,0,0,0.3)";
StyleVars.rules["heavyShadow"] = "rgba(0,0,0,0.5)";
StyleVars.rules["testColor"] = "#0FF";

StyleVars.lastID = 0;
StyleVars.mods = [];

StyleVars.setVar = function(keyword, value) {
  for (var key in StyleVars.rules) {
    if (StyleVars.rules[key].includes("keyword") ||
      value.includes("key")) {
      err("Can not include a keyword in a value", keyword, key, value, StyleVars.rules[key]);
      return;
    }
  }

  StyleVars.rules[keyword] = value;

  for (var i = 0; i < StyleVars.mods.length; i++)
    StyleVars.applyVar(StyleVars.mods[i].domNode, keyword);
}

StyleVars.modStyle = function(modMe) {


  if (modMe.StyleID === undefined) {
    var ID = modMe.pineStyleID = StyleVars.lastID++;
    mod = StyleVars.mods[ID] = {};
    mod.domNode = modMe;
    mod.hist = [];
  }


  for (var key in StyleVars.rules) {
    StyleVars.injectVar(modMe, key);

  }

}


StyleVars.injectVar = function(modMe, key) {
  var ID = modMe.pineStyleID;
  var modHist = StyleVars.mods[ID].hist;
  var replaceWith = StyleVars.rules[key];

  var modHistIndex = 0;
  var currentModOffset = 0;

  var regex = new RegExp(key, 'g')

  modMe.textContent = modMe.textContent.replace(regex, function(match, offset) {

    while (modHistIndex < modHist.length && offset + currentModOffset > modHist[modHistIndex].virginOffset) {
      currentModOffset += modHist[modHistIndex].modOffset;
      modHistIndex++;
    }

    var addMod = {};
    addMod.virginOffset = offset - currentModOffset;
    //"older" relpaced with "new" = 3 - 5 = -2 offset for all folowing indexes
    addMod.modOffset = replaceWith.length - key.length;
    addMod.key = key;
    addMod.currentLength = replaceWith.length;
    modHist.splice(modHistIndex, 0, addMod);
    modHistIndex++;

    return replaceWith;
  });
}


StyleVars.applyVar = function(styleNode, key) {
  var ID = styleNode.pineStyleID;
  var modHist = StyleVars.mods[ID].hist;
  var replaceWith = StyleVars.rules[key];

  var modHistIndex = 0;
  var currentModOffset = 0;

  for (var i = 0; i < modHist.length; i++) {
    var mod = modHist[i];
    if (mod.key == key) {
      styleNode.textContent = styleNode.textContent.slice(0, mod.virginOffset + currentModOffset) +
        replaceWith +
        styleNode.textContent.slice(mod.virginOffset + currentModOffset + mod.currentLength);

      mod.modOffset = replaceWith.length - key.length;
      mod.currentLength = replaceWith.length;
    }

    currentModOffset += mod.modOffset;
  }
}




//apply to all style elemnts on content ready
//ready listener removed for use in snippet
//document.addEventListener("DOMContentReady", function() {
var styles = document.getElementsByTagName("style");

for (var i = 0; i < styles.length; i++) {
  StyleVars.modStyle(styles[i]);
}
//});

<style>
  div {
     margin: 20px;
  }

  #testDiv1,
  #testDiv2 {
    height: 50px;
    width: 50px;
    border: 1px solid black;
  }
  
    #testDiv1 {
       background: linear-gradient(testColor, blue);
    }
    
    #testDiv2 {
       border-color: testColor;
    }
  
  #testDiv3 {
    color: testColor;
  }
</style>

<div id="testDiv1"></div>
<div id="testDiv2">border</div>
<div id="testDiv3">This div has the color used for font</div>
<button onClick="randomColor()">Change Color</button>