Programmatically editing Less code (css) with jQuery selector syntax?

Question

It is possible to use libraries in less.js to dynamically restore css from fewer files in the browser. If there was an easy way to modify less code, it would be an extremely powerful method for dynamically updating a css site.

Imagine that you had a color that was used 100 times on a large site. If you want to dynamically change this color simply using javascript, you need to update every css bit that has this color (maybe 50 lines of code).

With what I imagine, all you need to write is something like this:

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

I think about going for it 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 do is take a line with less code, programmatically edit it (possibly using syntax like jquery), and then spit it out with a Less change. Ideally, the code is in Javascript (but not necessarily client-side). The example I cited above is one of the possible applications, but perhaps not very good (where there may be more common ways to achieve it).

Answer 1

this is definitely possible, but I had to change the source code a bit (which I think is fine, given that it really is not meant to be executed :))

I assume that everyone wants to see the demo first, click here: http://jsfiddle.net/kritzikratzi/BRJXU/1/ (the script-winindow contains only the modified less.js source, all that is interesting in the html window)

kk, I will first explain my patch, use at the end.

Patch

consists of three parts

add utility function

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

save a property in an object and say less to update its styles.

change parsing 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 is serialize the overridden properties and add them to the end of each processed file.

change 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 it will replace the type parameter less from <style type='text/less'> to type='text/css' and forget about the less source. to prevent this, the original less source is loaded and loaded.

use 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 fine on my computer, and I have to admit that it looks very neat. I have not tested smaller external files, if they do not work, they should be easy to fix.

I still think that it is not a good idea to use this in a production environment (for reasons mentioned by others already).

Answer 2

While I agree with @ Baz1inga that in general it would be easier to do this by adding and removing classes, I also know that there are certain cases where variables like LESS work much better (for example, if the color sometimes stands in the foreground, sometimes background, or highlights in certain places). It is definitely capable; in fact, there is some proven code here that will do this (minus the jQuery-style syntax, any specific reason for this?):

 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); } 

The function "update_css" above is derived from the function "createCSS" in less.js; I wrote the rest. You can do something similar at any time to change the color, and the effects will immediately appear in the content of the site:

 set_less_var("mycolor", "green"); 

(Note that, of course, your "main code" should probably be loaded from .less files in the background - I just assigned them variables here for simplicity.)

Just for fun (as I do not recommend it) - and to show you that I think my code does what you want - here is a function that allows you to use the code above for $("@mycolor").value("black"); :

 function $(varname) { return { value: function(val) { set_less_var(varname.slice(1), val); } } } 

Answer 3

First of all, javascript cannot write to a file. The best you can do is get Javascript to read and edit the XML, and then publish this data to the server-side script to write to the file.

In general, people use a different class to solve this problem and replace the existing class with a new class, rather than editing the css file itself, which sounds pretty strange to me.

I came across this blogpost , maybe this is what you are looking for .. it shows different ways to get news stylesheets based on your requirement.

Answer 4

If you can do C # and want to do it on the server side, then port dotless supports plugins where you implement the visitor template to programmatically change the less ash before it spits out ...

Answer 5

it may be a good idéer, but if your css / html is right, it should not be necessary at all, you just need to css the stack correctly if you have a lot. "If you have very large websites, your clients can be quite picky about some small changes, such as a font, then it’s good to tune your result, and then it’s very simple to just get rid of it than make more variables to make your result

If you want to change one color, just use the search tool and use search and replace.

please just use some css and comon knowlegde to get the result, the more scripts that manage your site, the longer the load time.

Best wishes

SP

Answer 6

If you use the less compiler locally in your browser, there is now a function to change smaller variables :

 less.modifyVars({ '@buttonFace': '#5B83AD', '@buttonText': '#D9EEF2' });