cloudhead/less.js — Issue #689: Dynamic change less source from javascript
Author: Clodo76
Created: 2012-03-07 12:59:07+00:00
State: open

I'm trying to build an jQuery interface to change colors directly and view the results in realtime.
Something like the Invision Visual Skin Editor: http://community.invisionpower.com/blog/1174/entry-6222-ipboard-320-visual-skin-editor/

New colors are changed client-side, i can't serialize them, so the "watch" feature of Less is not for me, for what i understand.

Any colors we change are defined in a "config.less".

My hack, i added a row to xhr function:

xhr(sheet.href, sheet.type, function (data, lastModified) {

if(typeof(less.customAppendStyle) !== 'undefined') data += less.customAppendStyle(sheet.href, sheet.type); // MyHack

and added this to the page:

less.customAppendStyle = function(sheetHref, sheetType)
{
if(sheetHref == "/css/config.less")
return "\n@os-mycolor: #FF0000;";
else
return "";
}

After that, a simple
```less.refresh(true);```
will reload stylesheets, and when less load "config.less", it append my custom variable (override) before compiling.

I hope maybe exists some other better approach, or think about them, basically to allow adding javascript string dynamically as stylesheet source.

Thanks for attention.