0

There many discussions here about dynamic updating of color using LESS, e.g.: dynamically change LESS variables in page with JavaScript. But I have yet to see something that specifically addresses my challenge.

Our firm provides web software that gives users wide flexibility over the UI, including overall background color. But there are a number of elements that they can't change that need to have a background color in order to provide the proper user experience (cf. my Bootstrap Glyphicon question here -- sure would welcome an answer there, as well). I want to find a solution that takes whatever the user sets as a background color at any given time and applies it to other elements dynamically. I could do this via Javascript, but it seems like I should be able to leverage our use of LESS in our application stack to effectively create an unset mixin that is dynamically updated based on the user's UI choices. I tried many attempts to formularize a LESS solution, to no avail.

Am I barking up the wrong tree? Before I go the JS route, I'd like to see if anyone can suggest a LESS-based solution for this challenge. As always, thanks in advance for any help you could provide here.

Community
  • 1
  • 1
jimiayler
  • 674
  • 2
  • 11
  • 27

2 Answers2

1

just use variables in less, but you will need to transpile in the browser or have the server re transpile the css on variable change

Santiago Rebella
  • 2,399
  • 2
  • 22
  • 29
1

I do not usually use LESS in the browser, but going by the documentation provided here you can link to the javascript file that compiles your less files as

<!-- Here: include any less plugin scripts, any required browser shims and optionally set less = any options  -->
<script src="less.js"></script>
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<link data-dump-line-numbers="all" data-global-vars='{ "myvar": "#ddffee", "mystr": "\"quoted\"" }' rel="stylesheet/less" type="text/css" href="less/styles.less">

An even better approach would be to have configuration driven css generator, that generates the CSS file based on a set of parameters and gets served through a CDN.

jagzviruz
  • 1,453
  • 12
  • 27