For days I've been looking all over the internet for a way to dynamically create a less file, into which I would pass color and font variables set inside the wordpress theme customizer api. The closest thing I came up with is a way to insert these variables into style.css.php file dynamically, which is then embedded as css, thanks to this css-tricks article. I created a php file into which I wrote this code:
<?php
$absolute_path = explode('wp-content', $_SERVER['SCRIPT_FILENAME']);
$wp_load = $absolute_path[0] . 'wp-load.php';
require_once($wp_load);
$dark_red = get_option('color-1');
$light_red = get_option('color-2');
$white = get_option('color-3');
$dark_grey = get_option('color-4');
$light_grey = get_option('color-5');
header('Content-type: text/css');
header('Cache-control: must-revalidate');
?>
body{
font-family: <?php echo get_theme_mod( 'theme_font' ); ?>;
}
header{
background-color: <?php echo $dark_red ?>;
}
etc.
Which works when it is embeded as css, however when I try to @import "style.css.php"; into bootstrap.less, right below the @import "variables.less"; to override the bootstrap variables, prepros can't recompile the css file because of unrecognized input, and when I activate lessphp in my functions.php it gives me this error:
Fatal error: Uncaught exception 'Less_Exception_Chunk' with message 'ParseError: Unexpected input in custom-styles.css.php on line 1, column 0 1| @font-family-sans-serif: <?php echo get_theme_mod( 'theme_font' ); ?>;' in C:\xampp\htdocs\inicijativa\wp-content\themes\liberter-less\less\lib\Less\Parser.php:535 Stack trace: #0 C:\xampp\htdocs\inicijativa\wp-content\themes\liberter-less\less\lib\Less\Parser.php(343): Less_Parser->GetRules('C:/xampp/htdocs...') #1 C:\xampp\htdocs\inicijativa\wp-content\themes\liberter-less\less\lib\Less\Tree\Import.php(277): Less_Parser->parseFile('C:/xampp/htdocs...', '', true) #2 C:\xampp\htdocs\inicijativa\wp-content\themes\liberter-less\less\lib\Less\Tree\Import.php(193): Less_Tree_Import->ParseImport('C:/xampp/htdocs...', '', Object(Less_Environment)) #3 C:\xampp\htdocs\inicijativa\wp-content\themes\liberter-less\less\lib\Less\Tree\Ruleset.php(248): Less_Tree_Import->compile(Object(Less_Environment)) #4 C:\xampp\htdocs\inicijativa\wp-content\themes\liberter-less\less\lib\Less\Tree\Rulese in C:\xampp\htdocs\inicijativa\wp-content\themes\liberter-less\less\lib\Less\Parser.php on line 535
Is there a way to insert php variables generated by the theme customizer into less?
Edit: I seem to be way in over my head here. I looked at the lessphp documentation and I just don't seem to get it.
this is how I set the lessphp function in my functions.php
//compile less
function autoCompileLess() {
// include lessc.inc
require_once( get_template_directory().'/less/lessc.inc.php' );
// input and output location
$inputFile = get_template_directory().'/less/bootstrap.less';
$outputFile = get_template_directory().'/style.css';
// load the cache
$cacheFile = $inputFile.".cache";
if (file_exists($cacheFile)) {
$cache = unserialize(file_get_contents($cacheFile));
} else {
$cache = $inputFile;
}
$less = new lessc;
$less->setVariables(array(
"font" => get_theme_mod( 'theme_font' )
));
// create a new cache object, and compile
$newCache = $less->cachedCompile($cache);
// output a LESS file, and cache file only if it has been modified since last compile
if (!is_array($cache) || $newCache["updated"] > $cache["updated"]) {
file_put_contents($cacheFile, serialize($newCache));
file_put_contents($outputFile, $newCache['compiled']);
}
}
if(is_admin()) {
add_action('init', 'autoCompileLess');
}
Now I need to @import file with the variables set by the theme customizer, below the variables.less in bootstrap.less to override the default bootstrap variables, and then I need to recompile the style.css
So, how can I pass something like this
@font-family-sans-serif: <?php echo get_theme_mod( 'theme_font' ); ?>;
in a way that will work with lessphp?