使用类似JQuery的选择器语法以编程方式编辑Less（css）代码？
可以在less.js中使用库从浏览器中的较少文件动态重新生成css。 如果有一种简单的方法来修改较少的代码，这将是动态更新站点的CSS的一种非常强大的方法。
想象一下，你有一种在大型网站上使用过100次的颜色。 如果你想仅使用javascript动态改变那种颜色，你需要更新具有该颜色的每一位css（可能是50行代码）。
根据我的想象，你需要写的是这样的：
$('@mainColour').value('#F04'); 我正在考虑自己去做，但这听起来像一个巨大的项目，我想知道是否有人已经开始这样的事情？
编辑：澄清一下，理想情况下我想要做的是获取一串Less代码，以编程方式编辑它（可能使用类似jquery的选择器语法），然后将其吐出为修改后的Less。 理想情况下，代码是在Javascript中（但不一定是客户端）我上面给出的示例是一个可能的应用程序但可能不是一个好的（可能有更好的更常见的方法来实现它）。
这绝对是可能的，但我不得不稍微修改一下源代码（我觉得很好，考虑到它真的不是要做:)）
我想每个人都想先看一个演示，点击这里： http ： //jsfiddle.net/kritzikratzi/BRJXU/1/ （脚本窗口只包含修改后的less.js-source，感兴趣的一切都在html窗口中）
kk，我将首先解释我的补丁，用法是最后的。
补丁由三部分组成
添加实用function
less.Overrides = {}; less.Override = function( variableName, value ){ if( !value ){ delete less.Overrides[variableName]; } else{ less.Overrides[variableName] = value; } less.refreshStyles(); };
将属性保存到对象中，并告诉less更新它的样式。
修改解析函数
function parse(str, callback ){ ... var overrides = "\n\n"; for( var key in less.Overrides ){ overrides += key + ": " + less.Overrides[key] + ";\n"; } str += overrides;
我们在这里所做的就是序列化重写的属性并将它们添加到每个被解析的文件的末尾。
修改loadStyles函数
if (styles[i].type.match(typePattern) || styles[i].hasAttribute( "lessText" )) { var lessText; if( styles[i].hasAttribute( "lessText" ) ){ lessText = styles[i].getAttribute( "lessText" ); } else{ lessText = styles[i].innerHTML || ''; styles[i].setAttribute( "lessText", lessText ); } ....
默认情况下，less会将
的type参数替换为type='text/css'并忘记less-source。 为了防止这种情况，存储和加载原始的less-source。
用法和结论
i'm the header! make it red
这在我的电脑上运行得很好，我不得不承认它看起来非常整洁。 我没有测试外部较少的文件，如果它们不起作用，它应该很容易修复。
我仍然认为在生产环境中使用它并不是最好的主意（出于其他人已经提到的原因）。
虽然我同意@ Baz1inga，一般来说通过添加和删除类会更容易，我也知道在某些情况下LESS风格的变量工作得更好（例如，如果颜色有时是前景，有时是背景，或者是在某些地方减轻了）。 这绝对是可行的; 事实上，这里有一些经过测试的代码可以做到这一点（减去jQuery风格的语法;需要它的任何特殊原因？）：
function update_css(newcss) { var id = "styleholder"; if ((css = document.getElementById(id)) === null) { css = document.createElement('style'); css.type = 'text/css'; css.id = id; document.getElementsByTagName('head')[0].appendChild(css); } if (css.styleSheet) { // IE try { css.styleSheet.cssText = newcss; } catch (e) { throw new(Error)("Couldn't reassign styleSheet.cssText."); } } else { (function (node) { if (css.childNodes.length > 0) { if (css.firstChild.nodeValue !== node.nodeValue) { css.replaceChild(node, css.firstChild); } } else { css.appendChild(node); } })(document.createTextNode(newcss)); } } lessvars = {mycolor: "red"}; maincode = "div { color: @mycolor; }"; // this would be a long string, loaded via AJAX from a LESS file on the server function compile_less(variables) { var variable_less = ""; for (var variable in variables) { variable_less += "@" + variable + ": " + variables[variable] + ";"; } new(less.Parser)({ optimization: less.optimization }).parse(variable_less + maincode, function (e, root) { update_css(root.toCSS()); }); } compile_less(lessvars); function set_less_var(name, value) { lessvars[name] = value; compile_less(lessvars); }
上面的“update_css”函数派生自less.js中的“createCSS”函数; 我写的其余部分。 您现在可以随时执行此类操作，更改颜色并立即在网站内容中显示效果：
set_less_var("mycolor", "green");
（注意，当然，您的“主代码”应该可以从后台的.less文件中加载 – 为了简单起见，我只是将它们分配给变量。）
只是为了好玩（因为我不推荐它） – 并告诉你我认为我的代码做你想要的 – 这是一个允许你使用上面的代码做$("@mycolor").value("black"); ：
function $(varname) { return { value: function(val) { set_less_var(varname.slice(1), val); } } }
首先javascript无法写入文件。 您可以做的最好的事情是让Javascript读取和编辑XML，然后将该数据发布到服务器端脚本以写入文件。
一般来说，人们使用不同的类来解决这个问题并用新类替换现有的类而不是编辑css文件本身，这对我来说听起来很奇怪。
我偶然发现这篇博文可能就是您正在寻找的东西……他根据您的要求展示了获取新闻样式表的不同方法。
如果您可以执行c＃并希望在服务器端执行此操作，则无端口支持插件，您可以在其中实现访问者模式，以便在吐出之前以编程方式更改较少的内容…
它可能，只是可能是一个很好的idéer但是如果你的css / html是正确的，这根本不是必需的，你只需要以正确的方式css你可以堆叠你的类，如果你有很多“a”标签。 如果你有非常大的网站，你的客户可能会非常挑剔像字体这样的一些小变化然后很好地定制你的结果，然后很容易找到你的方法，而不是制作更多变量来实现你的结果
如果您想更换1种颜色，只需使用查找工具并使用查找和替换。
请使用一些css和comon knowlegde来获得结果，操作网站的脚本越多，加载时间就越多。
最好的祝福
SP
如果在浏览器中本地使用less编译器，现在有一个function可以修改较少的变量 ：
less.modifyVars({ '@buttonFace': '#5B83AD', '@buttonText': '#D9EEF2' });