0

I would like that a visitor on my site could change values of some LESS variables that I defined in my LESS stylesheets.

For example if I declared the following rule:

@color-of-text: blue;

body
{
  color:@color-of-text;
}

Obviously, website has blue text. But I would like that a user could select (is not important in which way... a dropdown, or checkbox or whatever) a different value, changing for example @color-of-text from 'blue' to 'red', like I wrote "@color-of-text: red;" directly in my less file.

Obviously this change should happens on the fly, withour reloading the page.

How to obtain this?

Cœur
  • 37,241
  • 25
  • 195
  • 267
Luca Detomi
  • 5,564
  • 7
  • 52
  • 77
  • possible duplicate of [Retrieve or set LESS variable from JavaScript?](http://stackoverflow.com/questions/8296906/retrieve-or-set-less-variable-from-javascript) – Bass Jobsen Feb 16 '14 at 22:15
  • possible duplicate of [How to change the theme color in less css using javascript/jquery](http://stackoverflow.com/questions/16008847/how-to-change-the-theme-color-in-less-css-using-javascript-jquery/16021893#16021893) ... you can do this using `less.modifyVars()`. However, I wouldn't recommend client-side LESS compiling in production. – Martin Turjak Feb 17 '14 at 01:34
  • Thank you Martin, I understand your suggest but it is only for a demo page about less power and flexibility, not a true production website! :-) – Luca Detomi Feb 17 '14 at 07:58

2 Answers2

0

You can't edit the LESS. LESS gets compiled down to CSS eventually and that's what's sent to your browser.

To answer your question though, you would use javascript and have it change the style property of the element on the page you wanted to change color based on user input.

If you want that color choice to persist over multiple pages loads / visits, that's another story.

thescientist
  • 2,906
  • 1
  • 20
  • 15
0

This has nothing to do with less.

You could generate different css file changing color variables of same less and then ask to client which css it would see.

You can store the choice in a cookie and then print the desiderd file in PHP every request page of the visitor

$skin = isset($_COOKIE['skin'])? $_COOKIE['skin'] : 'default';
echo '<link rel="stylesheet" type="text/css" href="path/to/'.$skin.'.css" />';

During the select you can refresh the page or change the css via javascript.

Luca Rainone
  • 16,138
  • 2
  • 38
  • 52
  • I understand your suggestion but I need a LESS solution because I'm creating a demo website about LESS flexbility... – Luca Detomi Feb 17 '14 at 07:59
  • LESS is a CSS `PRE`processor. You could process LESS every single request but is not efficient. In this case we need more infos about how you generate css from less (with exec in php?) – Luca Rainone Feb 17 '14 at 09:39
  • No no, simply JS compiling at runtime. As I said is simply a DEMO website, not a production one. – Luca Detomi Feb 17 '14 at 11:49