使用类似JQuery的选择器语法以编程方式编辑Less(css)代码？

Question

可以在less.js中使用库从浏览器中的较少文件动态重新生成css.如果有一种简单的方法来修改较少的代码,这将是动态更新站点的CSS的一种非常强大的方法.

想象一下,你有一种在大型网站上使用过100次的颜色.如果你想仅使用javascript动态改变颜色,你需要更新具有该颜色的每一位css(可能是50行代码).

根据我的想象,您需要编写的所有东西都是这样的:

$('@mainColour').value('#F04');

我正在考虑自己去做,但这听起来像一个巨大的项目,我想知道是否有人已经开始这样的事情？

编辑:澄清,理想情况下我想要做的是采用一串Less代码,以编程方式编辑它(可能使用类似jquery的选择器语法),然后将其吐出为修改后的Less.理想情况下,代码是在Javascript中(但不一定是客户端)我上面给出的示例是一个可能的应用程序但可能不是一个好的(可能有更好的更常见的方法来实现它).

Answer 1

这肯定是可能的,但我不得不稍微修改一下源代码(我认为这很好,考虑到它真的不是要做的:))

我想每个人都想 先看一个演示,点击这里: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(); 
}; 

将属性保存到对象中,并告诉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会将类型参数替换为<style type='text/less'>to type='text/css'并忘记less-source.为了防止这种情况,存储和加载原始的less-source.

用法和结论

<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> 

这在我的电脑上运行得很好,我不得不承认它看起来非常整洁.我没有测试外部较少的文件,如果它们不起作用,它应该很容易修复.

我仍然认为在生产环境中使用它不是最好的主意(出于其他人已经提到的原因).

Answer 2

首先，JavaScript 无法写入文件。您能做的最好的事情就是让 Javascript 读取和编辑 XML，然后将该数据发布到服务器端脚本以写入文件。

一般来说，人们使用不同的类来解决这个问题，并用新类替换现有的类，而不是去编辑 css 文件本身，这对我来说听起来很奇怪。

我偶然发现了这篇博文，可能这就是您正在寻找的内容。他展示了根据您的要求获取新闻样式表的不同方法。