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

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

想象一下，你有一种颜色在一个大型网站上使用了100次。如果您只想使用javascript动态更改该颜色，则需要更新具有该颜色的每一位css（可能是50行代码）

根据我的想象，你需要写的东西是这样的：

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

我自己也在考虑尝试一下，但这听起来像是一个巨大的项目，我想知道是否有人已经开始了类似的工作

编辑：为了澄清这一点，理想情况下，我希望能够做的是获取一个更少代码的字符串，通过编程对其进行编辑（可能使用类似jquery的选择器语法），然后以更少修改的方式将其输出。理想情况下，代码是用Javascript编写的（但不一定是客户端）。我上面给出的示例是一个可能的应用程序，但可能不是一个好的应用程序（可能有更好的更常见的实现方法）

首先，javascript不能写入文件。尽你所能 要做的是让Javascript读取和编辑XML，然后发布数据 要写入文件的服务器端脚本

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

---

我偶然发现也许这就是你要找的。。他展示了根据您的要求获取新闻样式表的不同方法。

虽然我同意@Baz1inga的观点，即一般来说，通过添加和删除类可以更容易地做到这一点，但我也知道在某些情况下，样式变量越少效果越好（例如，如果颜色有时是前景色，有时是背景色，或者在某些地方变亮了）。这是绝对可以做到的；事实上，这里有一些经过测试的代码可以做到这一点（减去jQuery风格的语法；需要它的特殊原因是什么？）

上面的“update_css”函数是从less.js中的“createCSS”函数派生而来的；其余的是我编写的。现在，您可以随时执行类似操作，更改颜色并使效果立即显示在网站内容中：

set_less_var("mycolor", "green");

（请注意，当然，您的“main代码”可能应该从后台的.less文件加载——为了简单起见，我在这里将它们分配给变量。）

只是为了好玩（我不推荐）——为了向您展示我认为我的代码可以满足您的需要——这里有一个函数，允许您使用上面的代码执行

$（“@mycolor”）。value（“black”）；

：

---

如果您可以使用c#并希望在服务器端使用此功能，那么port dotless支持插件，在插件中您可以实现访问者模式，以编程方式在吐出较少的ast之前对其进行更改…

这当然是可能的，但我必须稍微修改较少的源代码 （考虑到这真的不是注定要做的，我认为这很好：）

我想每个人都想先看演示，请单击此处： （脚本窗口仅包含修改后的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(); 
}; 

   function parse(str, callback ){
        ... 

        var overrides = "\n\n"; 
        for( var key in less.Overrides ){
            overrides += key + ": " + less.Overrides[key] + ";\n"; 
        }

        str += overrides; 

    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更新其样式

修改解析函数

less.Overrides = {}; 
less.Override = function( variableName, value ){
    if( !value ){
        delete less.Overrides[variableName]; 
    }
    else{
        less.Overrides[variableName] = value; 
    }
    less.refreshStyles(); 
}; 

   function parse(str, callback ){
        ... 

        var overrides = "\n\n"; 
        for( var key in less.Overrides ){
            overrides += key + ": " + less.Overrides[key] + ";\n"; 
        }

        str += overrides; 

    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.Overrides = {}; 
less.Override = function( variableName, value ){
    if( !value ){
        delete less.Overrides[variableName]; 
    }
    else{
        less.Overrides[variableName] = value; 
    }
    less.refreshStyles(); 
}; 

   function parse(str, callback ){
        ... 

        var overrides = "\n\n"; 
        for( var key in less.Overrides ){
            overrides += key + ": " + less.Overrides[key] + ";\n"; 
        }

        str += overrides; 

    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='text/css'

，并忘记less的源代码。为防止出现这种情况，存储并加载原始较少的源

用法与结论

@颜色：绿色；
#标题{color:@color；}
我是头球！

这在我的电脑上运行得很好，我不得不承认它看起来很整洁。 我没有测试过外部less文件，如果它们不工作，应该很容易修复

---

我仍然认为在生产环境中使用它不是最好的主意（因为其他人已经提到了一些原因）

它可能，只是可能是一个很好的idéer，但是如果你的css/html是正确的，那么这根本就没有必要，你只需要以正确的方式使用css，如果你有很多“a”标记，你可以堆叠你的类。如果你有非常大的网站，你的客户可能会对一些小的改变很挑剔，比如字体，那么定制你的结果是很好的，然后很容易用css来摆脱它，而不是用更多的变量来产生结果

如果你想改变一种颜色，你只需使用你的查找工具，并使用查找和替换

请使用一些css和comon Knowledge来获得您的结果。越多的脚本操作您的网站，加载时间就越长

致意

---

SP

如果在浏览器中本地使用less编译器，则现在会出现：

---

我想到的这个功能的特定应用程序是非常非标准的，所以我同意这个想法对于一般的前端开发来说是“奇怪的”（在这种情况下类替换是合适的），但不是我想到的。至于浏览器JS无法写入文件（服务器端JS可以），我打算将现有的较少文件读入内存，在内存中以编程方式对其进行编辑，然后将生成的代码输出到屏幕或发送到服务器。博客描述了一些与我想做的相关的事情，但我特别希望能够编辑更少的内容，而不是CSS。这与我的想法不完全一样（以编程方式编辑和替换现有的更少的代码，而不是使用更少的内容生成覆盖CSS），但对于某些情况，这可能是一种非常有用的技术。我承认jquery语法的想法是相当不成熟的。