Question

我需要在css文件中创建一个静态的颜色定义列表。像这样：

.color_test: #00ff00;

并在其他类中使用此定义，如下所示：

background-color: .color_test;

只能使用css吗？

Answer 1

这在CSS中是不可能的。为了能够在变量中定义可重用的值，您需要使用LESS或SASS之类的东西来查看，然后将其“编译”到CSS中。

Answer 2

Mozilla Firefox＆gt;仅限v30

在Firefox版本中，更多30这样的功能，名为CSS variables已实现并正常工作。不幸的是，目前没有其他浏览器支持此功能（有关supprt详细信息，请参阅canIUse。）

Mozilla开发者网络为该功能提供comprehensive manual。

变量在标准CSS选择器中声明：

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

并累积申请：

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

您可能还要查看W3C definition of Cascading Variables。

但是只要这个功能没有被广泛应用，你就需要使用像LESS或SASS这样的CSS预处理器来模拟这种行为。

LESS

也可以在CSS选择器之外设置LESS变量：

@any-green-color: #12FF10;

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

此外，LESS变量可能包含许多其他令人敬畏的信息（有关详细信息，请参阅LESS documentation）

Answer 3

这在CSS中是不可能的。这种风格可能在LESS或SASS。

Answer 4

这是直接CSS的缺点之一。您无法定义变量。查看Sass。学习起来既简单又快捷。您将在半天内开始运行，我认为这样可以避免一些麻烦。

Answer 5

我希望能够用js做到这一点，并且arbritrarily改变定义颜色的值，所以我做了这个。

它会监视它修改css的位置，以便在找到目标后不会经常搜索它。

它的问题是目前只适用于样式元素，可以很容易地改变它。

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>

颜色定义为css

5 个答案:

Mozilla Firefox＆gt;仅限v30

LESS