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

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 );
      }
    });
  }
});