Question

我有一个colors.less文件，可以为网站维护一致的调色板。

我还有一个chart.js文件，要求硬编码颜色以适当的颜色显示图表元素。

如何使图表颜色取决于生成的colors.css文件？

到目前为止，我一直在维护两个调色板，一个在less，另一个在js。我如何合并这两个？

示例：

/* colors.less */
@green:    #46a546;
@red:      #9d261d;
@yellow:   #f1c40f;

和

/* chart.js */
var chartElements = {
    "apples": {
        label: "Apples",
        color: "#46a546",
    },
    "oranges": {
        label: "Oranges",
        color: "#f1c40f",
    },
    "grapes": {
        label: "Grapes",
        color: "#9d261d",
    }...

如何停止维护这两组颜色？

Answer 1

即使Pointy的答案在这里可能更合适（谈论LESS），我想提醒您可以通过ECMAscript直接访问样式表数据。您可能能够识别特定规则并获取该值。可能看起来像

[].forEach.call(document.styleSheets, function( set ) {
  if( set.href && set.href.indexOf( 'dialog.css' ) > -1 ) {
    [].forEach.call( set.cssRules, function( rule ) {
      if( rule.selectorText === 'div#dialog-container-left' ) {
        // to whatever here, grab the value and store it for global application usage
        console.log( rule.style.backgroundColor );
      }
    });
  }
});

Answer 2

遇到那个确切的问题，我已经解决了＃34;以下是黑客攻击。

CSS包含一个＆＃34; swatch-nn＆＃34;课程（swatch-1，swatch-2等）。那些获得预定义的LESS常量作为其背景颜色。（对我来说，一个简单的数字排序列表有效;其他情况可能需要其他方法。）

我的SPA包装器创建一个（隐藏的）具有样本类的元素列表。

<div id=swatches>
  <div class=swatch-1>
  <div class=swatch-2>
  <!-- etc -->
</div>

应用程序启动时的某些JavaScript代码会从样本中填充全局可用的颜色列表。

var swatches = {}, $swatchContainer = $("#swatches"), rname = /\bswatch-(.*)\b/;

$swatchContainer.children("div").each(function() {
    var swatch = this;
    this.className.replace(rname, function(_, label) {
        swatches[label] = $(swatch).css("backgroundColor");
    });
})

$.swatches = swatches;

我的Chart.js代码因此将颜色值复制出该全局数组。它的原油但工作正常。

如何有效地将css值导入javascript文件？

2 个答案: