使用类似JQuery的选择器语法以编程方式编辑Less（css）代码？ [英] Programmatically editing Less (css) code with JQuery-like selector syntax?
问题描述
可以使用less.js中的库来从浏览器中的较少文件中动态重新生成CSS。如果有一个简单的方法来修改较少的代码，这将是一个非常强大的方法动态更新网站的CSS。
想象一下，你有一个颜色，使用了100次整个大型网站。如果你想使用javascript动态更改颜色，你需要更新每一个CSS的颜色（也许50行代码）。
我想象你需要写的是这样的：
$（'@ mainColour'）。value ＃F04'）;
我想自己去做这个项目，但它听起来像一个巨大的项目，不知道有人已经开始这样的事吗？
编辑：理想地，我想要能够做的是采取一个Less代码字符串，编程（可能使用类似jquery的选择器语法），然后吐出作为修改Less。理想情况下，代码是Javascript（但不一定是客户端）上面给出的示例是一个可能的应用程序，但也许不是一个好的（可能有更好的更常见的方式实现它）。
这是绝对可能的，但我不得不修改较少的源代码一点
（我认为很好，考虑到它真的不是done :)）
我想大家都想先看一个演示，点击这里：
http://jsfiddle.net/kritzikratzi/BRJXU/1/
（脚本窗口只包含修改的less.js-source，感兴趣的一切都在html窗口）
kk，我将首先解释我的补丁，用法是结束。
补丁由三个部分组成
添加效用函数
less.Overrides = {};
less.Override = function（variableName，value）{
if（！value）{
delete less.Overrides [variableName];
}
else {
less.Overrides [variableName] = value;
}
less.refreshStyles（）;
};
将属性保存到对象中，并告诉更少的更新它的样式。
$ b
修改剖析函式
function parse（str，callback）{...
var overrides =\\\
\\\
;
for（var key in less.Overrides）{
overrides + = key +：+ less.Overrides [key] +; \\\
}
str + =覆盖;
我们在这里做的是序列化重写的属性，并将它们添加到每个解析的文件。
$ b
修改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）;
}
....
从< style type ='text / less'> 到 type ='text / css'较少来源。以防止这种原始的较少的源被存储和加载。
使用和结论
< style type =text /少>
@color：green;
#header {color：@color; }
< / style>
< div id =header>我是标题！< / div>
< a href =＃onclick =less.Override（'@ color'，'red'）;>使其为红色< / a>
这在我的电脑上工作得很好，我不得不承认它看起来很整洁。
我没有测试外部较少的文件，如果他们不工作，它应该很容易解决。
我仍然认为在生产环境中使用它不是最好的想法（由于其他人已经提到的原因）。
It's possible to use libraries in less.js to dynamically regenerate css from less files within the browser. If there was an easy way to modify less code, this would be an extremely powerful method of dynamically updating a site's css.
Imagine you had a colour that was used 100 times throughout a large site. If you wanted to change that color dynamically just using javascript, you would need to update every bit of css that had that colour (perhaps 50 lines of code).
With what I'm imagining all you would need to write is something like this:
$('@mainColour').value('#F04');
I'm thinking of having a go at this myself, but it sounds like a huge project and I wonder if someone has already started something like this?
edit: to clarify, ideally what I want to be able to do is take a string of Less code, programatically edit it (perhaps using a jquery-like selector syntax) and then spit it out as modified Less. Ideally the code is in Javascript (but not necessarily client side) The example I give above is one possible application but maybe not a good one (where there might be better more common ways of achieving it).
it is definitely possible, but i had to modify the less sourcecode a bit (which i think is fine, considering it's really not meant to be done :) )
i suppose everyone wants to see a demo first, click here: http://jsfiddle.net/kritzikratzi/BRJXU/1/ (script-window contains only the modified less.js-source, everything of interest is in the html window)
kk, i'll first explain my patch, usage is at the end.
patch consists of three parts
add a utility function
less.Overrides = {};
less.Override = function( variableName, value ){
if( !value ){
delete less.Overrides[variableName];
}
else{
less.Overrides[variableName] = value;
}
less.refreshStyles();
};
save the property into an object and tell less to update it's styles.
modify the parse function
function parse(str, callback ){
...
var overrides = "\n\n";
for( var key in less.Overrides ){
overrides += key + ": " + less.Overrides[key] + ";\n";
}
str += overrides;
all we do here is serialize the overridden properties and add them to the end of every file that is parsed.
modify the loadStyles function
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 );
}
....
by default less will replace the type parameter from <style type='text/less'> to type='text/css' and forgot about the less-source. to prevent this the original less-source is stored and loaded.
usage and conclusion
<style type="text/less">
@color: green;
#header{ color: @color; }
</style>
<div id="header">i'm the header!</div>
<a href="#" onclick="less.Override('@color', 'red');">make it red</a>
this works just fine on my computer and i have to admit it looks very neat. i haven't tested external less files, if they don't work it should be easy to fix.
i still think it's not the best idea to use this in a production environment (for reasons mentioned by others already).
这篇关于使用类似JQuery的选择器语法以编程方式编辑Less（css）代码？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
