I’m trying to use “WordPress Customizer API” to let users change the style of website.
for doing it, I have some different
variables.less in my assets/less/ folder. (like variables_1.less, variables_2.less , …).
now I need to tell the main.less file change the file to load base on what user choose from “Theme Customizer Admin Panel”.
I would be appreciated if anybody help me to find solution.
You could do that with a conditional enqueue, but that would mean relying on LESS’s client side usage to compile your LESS into CSS in browser. But remember, just because you can do something doesn’t make it right
The alternative is to separate out the selectors affected by your various customization options and output those directly in your
<head> with conditional values. That way your remaining, unchanging LESS can be compiled, prefixed, concatenated, and minified for faster page loads.
There are projects that would enable this. One of them is WP-LESS:
I’ve gotten so far as setting it up and playing with it, and it seems to work fine. You do lose the ability to do live CSS updates without refreshing the page, though.
grunt watch again.
I’ve thought about doing something like this if I were ever to build a public theme for something like the WordPress theme repository.
Roots doesn’t have anything built in to handle something like this though, as it relies on having Node and Grunt/gulp installed.
I haven’t planned it all out, but I think the cleanest thing would be to set up a custom.css file with overrides, instead of compiling the main CSS file. Just seems like there would be more chance for breakage. I think the theme’s base css file should probably be untouched.
Then you could use something like http://leafo.net/lessphp/ to compile your css into a
custom.css file and have that enqueued with the user’s changes. You could most likely hook into whenever the Theme Customizer is saved and have lessphp run.
That’s one way you could do it