WordPress Customization API overwrite LESS variable

Question

I am fairly new to WordPress Developing. Currently I am developing my own theme and would like to add css LESS. Don't think this is a problem ? I was wandering if it is possible to overwrite LESS variables with the Customization API.

example: I have a color variable @main-color, when the user changes the default color in the Customization API, I want to override that variable. (not simply put some css in the header).

Is this possible ? Does anyone have an example ?

Answer 1

LESS happens as a preprocessor and doesn't render dynamically each time your page loads. So, you write your LESS, compile it to CSS, and then load the CSS in your pages.

There may be ways around this, but you would probably be better off using targeted CSS with classes to create the CSS on the fly.

add_action( 'wp_head', 'do_custom_css' );

function do_custom_css() { 
    if ( $custom_color = get_custom_color() ) {
        ?>
<style>
.some-class {
    color: {$custom_color};
}
</style>
        <?php
    }
}