Skip to content

Commit

Permalink
less.modifyVars(JSON-object);
Browse files Browse the repository at this point in the history
Simple interface to modify variables and re-render CSS without reloading less-files
session_cache value is stored at row 2784

Sample LESS:
------------
@bgcolor: black;
@textcolor: yellow;
body {background: @bgcolor; color: @textcolor;}

From JS:
--------
less.modifyVars({
  '@bgcolor': 'blue',
  '@textcolor': 'red'
});
  • Loading branch information
hbi99 committed Jan 5, 2012
1 parent 77c8df0 commit 6508fe8
Showing 1 changed file with 20 additions and 0 deletions.
20 changes: 20 additions & 0 deletions dist/less-1.1.6.js
Original file line number Diff line number Diff line change
Expand Up @@ -2701,6 +2701,23 @@ for (var i = 0; i < links.length; i++) {
}
}

//
// With this function, it's possible to alter variables and re-render CSS without reloading less-files
// session_cache value is set at row 2784
//
// Usage: less.modifyVars({'@color': 'red'});
//
var session_cache = '';
less.modifyVars = function(record) {
var str = session_cache;
for (name in record) {
str += ((name.slice(0,1) === '@')? '' : '@') + name +': '+
((record[name].slice(-1) === ';')? record[name] : record[name] +';');
}
new(less.Parser)().parse(str, function (e, root) {
createCSS(root.toCSS(), less.sheets[less.sheets.length - 1]);
});
};

less.refresh = function (reload) {
var startTime, endTime;
Expand Down Expand Up @@ -2765,6 +2782,9 @@ function loadStyleSheet(sheet, callback, reload, remaining) {
}

xhr(sheet.href, sheet.type, function (data, lastModified) {
// Store data this session
session_cache += data.replace(/@import .+?;/ig, '');

if (!reload && styles && lastModified &&
(new(Date)(lastModified).valueOf() ===
new(Date)(styles.timestamp).valueOf())) {
Expand Down

12 comments on commit 6508fe8

@christek
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is very useful. Any possibility to make this work with the newest version of less.js (1.3.0)?

@hbi99
Copy link
Owner Author

@hbi99 hbi99 commented on 6508fe8 Jul 17, 2012

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Dear christek,
Thank you for the positive comment :)
I have submitted a pull request a while ago.

The use-case for this is pretty narrow (IMHO) and that might be the reason to why it's down-prioritized.

@emiliosanchez
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Really, really useful. I think that if you do the changes in the source code of less.js instead of in the generated js you will have more chances to get the pull request approved.

You just need to modify lib/less/browser.js like this emiliosanchez@536b672

It works perfectly with 1.3.0

@thomas-seres
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi !
@emiliosanchez thank you for adding the modifyVars func to less lib, but how can I build or find a release from your modifications ?

Have a nice day !

@emiliosanchez
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In https://github.com/emiliosanchez/less.js/tree/master/dist you have the files already builded. If you want to build by yourself you only have to invoke make from the main source directory (you will need nodejs)

@thomas-seres
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@emiliosanchez thank you ! Very helpful

@meelan
Copy link

@meelan meelan commented on 6508fe8 Oct 21, 2012

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks this is really awesome. Is there any way to commit to the new values to the .less file? As all the changes are lost on page reload

@hbi99
Copy link
Owner Author

@hbi99 hbi99 commented on 6508fe8 Oct 23, 2012

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Dear meelan,
My instant thought was that such feature isn't recommended and is outside the scope of this functionality.
Though after having thought about it, this can be useful and done with finess.

Nowadays, my problem is time; I prioritize private projects on my spare time. :-(

@fernandogmar
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice! @emiliosanchez +1

@hbi99
Copy link
Owner Author

@hbi99 hbi99 commented on 6508fe8 Dec 21, 2012

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

An issue was recently discovered and I've made a suggestion. If you use the function "modifyVars", I suggest that you follow this thread; less#721 (comment)

@thecolab
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This seems to be the closest solution to easily allowing for dynamically updating variables based on WordPress Theme Options settings.

@TrySpace
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It would be awesome if the recompiling process wouldn't make chrome stutter, especially when modifying variables that are animating a height or something, it seems these seemingly basic animations don't run smoothly when less is still recompiling.

Please sign in to comment.