减少从javascript访问的变量？

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

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

希望能够从javascript中访问这些内容，例如：

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

会有用的

由于Less是在服务器端编译的，所以通常的选项不起作用

我已经开始着手编写一个grunt任务，从这些较少的规则中生成一个js文件，但是这似乎是一种低效/笨拙的方法

---

任何关于更好的方法或工具的建议都会有所帮助

您可以将每种颜色附加到样式规则中的类名，然后将特定类添加到对象以触发所需颜色的设置。类名将在CSS样式中定义，然后在javascript中通过字符串名引用它们

CSS:

Javascript:

$('body').addClass('black');

---

您还可以使用浏览器中内置的CSS颜色名称：

$('body').css('color', 'black');

以下是内置的颜色名称列表：和

---

---

除此之外，如果您希望通过编程访问颜色的符号名，那么您需要为这些名称生成自己的Javascript定义，并将其包含在Javascript中，以便使用这些符号。

您可以在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']; 
        }
    }
}

---

首先在CSS中添加一个使用LESS变量的规则。 然后使用该类创建一个虚拟元素，并检查其

getComputedStyle

颜色：

函数getLessVariableValue（变量）{ var elt=document.createElement（'div'）； elt.className=variable+“-variable”； elt.style.display=“none”//确保元素不可见 document.body.appendChild（elt）；//elt必须在DOM中才能计算样式 var result=window.getComputedStyle（elt）.fontFamily； 文件.body.removeChild（elt）； 返回结果； } document.writeln（getLessVariableValue（'purple'））

/*将下面的“紫色”替换为“@purple”等*/
.purple变量{font-family:purple；}

您可以使用如下css变量

let StyleVars=document.querySelector（':root'）；
//创建用于获取变量值的函数
函数GetStyleVars（变量=“--color”）{
//获取根目录的样式（属性和值）
var Style=getComputedStyle（StyleVars）；
返回（Style.getPropertyValue（变量））；
}
//创建用于设置变量值的函数
函数ChangeVariableValue（Value，Variable=“--color”）{
//将变量的值设置为另一个值
StyleVars.style.setProperty（变量、值）；
}
document.getElementById（“A”）.onclick=function（）{
ChangeVariableValue（“红色”）；
}
document.getElementById（“B”）.onclick=function（）{
可变值（“绿色”）；
}
document.getElementById（“C”）.onclick=function（）{
可变值（“黑色”）；
}
document.getElementById（“D”）.onclick=function（）{
警报（GetStyleVars（））；
}

：根目录{
--颜色：#fff；
}
钮扣{
边框：2px实心变量（--颜色）；
}

红色


绿色


黑色


警告值

Solid suggestion，但是仍然不能解决使用不同颜色规则的问题，例如背景、边框等。我知道这类事情正是css类的目的，只是想避免太频繁地编写相同的事情。@ioseph-我添加了几个其他选项，但就是这样。如果不使用浏览器中已经内置的颜色名称或定义您自己的符号，您所要求的就不存在。我宁愿相反：在javascript代码中定义变量（例如一些JSON内容），并通过

globalVars

/

modifyVars

（没有特定的编译器选项来导入JSON，但这可以通过

grunt

tasks来实现）。@seven phases max-你真的需要自己编写颜色名称/值，而不是使用已建立的命名吗？@jfriend00（对不起，我想我应该首先将我的注释添加到Q中，而不是添加到A中）.是的，如果只是一些样式，那么你的方法就是最好的选择（最初的操作愿望看起来很奇怪），但是如果它真的是关于一些通用的“我需要一些变量值在我的Less代码和JavaScript代码中共享”那么…这些答案对你有用吗？如果是，请接受。你的grunt任务有什么值得一提的结果吗？我目前正在考虑同样的问题-减少变量（主要是特定于解决方案的断点）在我的例子中，我更喜欢一个构建任务，咕噜声，咕噜声或者其他我可以集成到项目构建中的东西

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']);