使更少的变量可从javascript访问？

Question

我的文件颜色较少，其定义如下所示：

@black:                 #000;
@greyDarker:            #222;
...etc

并希望能够从javascript中访问它们，例如：

$('body').style('color', 'window.colours.black') // or however I assign them

会工作。

由于Less正在服务器端进行编译，因此通常的选项将不起作用。

我已经开始着手编写一个艰巨的任务，以根据这些较少的规则生成js文件，但这似乎是一种效率低下的方法。

关于可以帮助的更好方法或工具的任何建议

Answer 1

您可以在 CSS 中放入一些特殊定义来传递定义。这些将仅用于传递变量，而没有其他作用。您需要提出一些约定，这里我使用了 div.less-rule-{rule-name}

例如。

div.less-rule-black {
    background-color: @black;
}
div.less-rule-grey-darker {
    background-color: @greyDarker;
}

然后，您可以使用 JavaScript API 来获取这些样式表以访问样式表。您可以将其放在某个实用程序类中。当所有的样式表都被加载时，这只需要做一次。

var rules, rule, i, n, j, m, key;
var lessRules = [];
for (i = 0, n = document.styleSheets.length; i < n; i++) {
    rules = document.styleSheets[i].cssRules; 
    for (j = 0, m = rules.length; j < m; j++) {
        rule = rules[j];
        if (rules[j].selectorText.indexOf('less-rule') !== -1) {
           key = /div.less-rule-(.*)/.exec(rules[j].selectorText)[1];
           lessRules[key] = rule.style['background-color']; 
        }
    }
}

然后，您可以使用散列中的键来访问变量。

console.log(lessRules['black']);
console.log(lessRules['grey-darker']);