Change CSS values with live preview using Less

Question

I want to make a page in an Admin CP where you can customize the values of some CSS properties, e.g. background-colors. This should have a live preview like e.g. in Wordpress, but I don't know how.

I'm using LESS for the styles, so I thought about using Less.js and

less.modifyVars()

It works, but the problem is, it takes about one second to show the change in the page, since the less file is not small, because I also import Bootstrap.

Any other idea how to do something like this?

I try to avoid creating a function for each element and property. — user3817008, Sep 11 '14 at 10:50

score 0 · Answer 1 · edited May 23 '17 at 10:26

0

Assuming you are using LiveReload or something like this to , split one large file into many smaller files. LiveReload will then only reload/update the files which actually have been changed - which should be much faster/instant.

You can save CSS changes using Chrome Dev Tools - more here How to save CSS changes of Styles panel of Chrome Developer Tools?

edited May 23 '17 at 10:26

Community

1
1

answered Sep 11 '14 at 10:56

Iladarsda

10,640
39
106
170

Thanks, but I ment something like the last example here: http://www.eyecon.ro/colorpicker/ A way to change the values in the browser – user3817008 Sep 11 '14 at 11:13
You mean change the value in the browser and save this to the css/less? – Iladarsda Sep 11 '14 at 12:13
Yes and inside the website, so no browser addons etc – user3817008 Sep 11 '14 at 13:02
This might be possible using Chrome Dev Tools - http://stackoverflow.com/questions/6843495/how-to-save-css-changes-of-styles-panel-of-chrome-developer-tools – Iladarsda Sep 11 '14 at 13:31
But the user/browser should not be able to save anything, you as a developer might want/can do this as per link above – Iladarsda Sep 11 '14 at 13:32

Change CSS values with live preview using Less

1 Answers1