Override Twitter's Bootstrap LESS variables with LESSPHP

Question

I've been messing around with lessphp and bootstrap-colorpicker and I'd like to find out if it's possible to override less variables with a hex color set by bootstrap-colorpicker, something like:

<?php
if(isset($_POST['submit'])){
    require "lessc.inc.php";

    $less = new lessc;
    $less->setVariables(array("bodyBackground" => $_POST['color']));
    $less->checkedCompile("less/bootstrap.less", "output.css");

    try{
        $less->compile("invalid LESS } {");
    }catch(exception $e){
        echo "fatal error: " . $e->getMessage();
    }
}?>

markup:

<form method="post" action="">
    <input name="color" 
           type="text" 
           class="span3" 
           value="<?php if(isset($_POST['color'])){echo $_POST['color'];}else{echo       
                 '#8fff00';}?>" 
           id="cp1" />
    <input name="submit" class="btn btn-primary" type="submit" value="Submit"/>
</form>
<script>
$function(){
    var bodyStyle = $('body')[0].style;

    $('#cp1').colorpicker({format: 'hex'}).on('changeColor', function(ev){    
        bodyStyle.backgroundColor = ev.color.toHex();
});
</script>

I thought this would work but it doesn't, I'm not totally sure that setVariables is passing the POST data as @bodyBackground: #new_hex; since i'm currently getting the default value of bootstrap's @white less variable. I'm new to lessphp and was wondering if its possible to assign new values to bootstrap less variables before compiling?

Thanks in advance

Bass Jobsen · Answer 1 · 2013-06-04T21:12:32.140

No you can't (i think). Reading the docs on http://leafo.net/lessphp/docs/#compiling. Your set $less->checkedCompile array isn't used by $less->checkedCompile. Cause checkedCompile() and compileFile() read (less) files.

What you could do: 1) add a line like: `@import "_custom.less"; at the end of less/bootstrap.less. 2) your php code:

require "lessc.inc.php";

$fp = fopen('less/_custom.less','w');
fwrite($fp,'@bodyBackground : '.$_POST['color']."\n");
fclose($fp);

$less = new lessc;
//$less->setVariables(array("bodyBackground" => $_POST['color']));
$less->FileCompile("less/bootstrap.less", "output.css");

` NOTE checkedCompile is very basic, it only checks the input file’s modification time. It is unaware of any files from @import.

And yes you could use hex colors.

Update if you don't want to make changes to your bootstrap's less files try:

/* with twitter boostrap less files in ./bootstrap-master/less */
error_reporting(E_ALL);
ini_set('display_errors','on');
require('lessphp/lessc.inc.php');

file_put_contents('./custom.less','@bodyBackground : '.$_POST['color']."\n");

$less = new lessc;
$less->setImportDir(array('./bootstrap-master/less','.'));
try {
$css = $less->compile(file_get_contents('./bootstrap-master/less/bootstrap.less')."\n" . '@import "custom.less";'); 
} catch (Exception $ex) {
    echo "lessphp fatal error: ".$ex->getMessage();
}

file_put_contents('./bootstrap.css',$css);
exit;

Override Twitter's Bootstrap LESS variables with LESSPHP

1 Answers1