LESS for WordPress to compile Bootstrap 3.1+

Many of the LESS compilers for WordPress or PHP use the Leafo LessPHP library, from https://github.com/leafo/lessphp (see http://leafo.net/lessphp/docs/ ). For example, the current (6/1/2015) version of AssetsMinify plugin for WordPress uses LessPHP.

The Leafo LessPHP library doesn’t compile the LESS extend command, used heavily in Bootstrap 3.1+ and many other LESS packages. “Extend is a Less pseudo-class which merges the selector it is put on with ones that match what it references.” And it seems Leafo LessPHP isn’t getting updated.

Even worse, many libraries haven’t modified the Leafo package to even catch the failure — they fail with a PHP fatal error such as

PHP Fatal error: Uncaught exception 'Exception' with message 'parse error: failed at &:extend(.clearfix all);'

At a minimum, the library should catch the exception, so that PHP doesn’t abort; the exception should leave a comment in the generated CSS such as “This version of LessPHP uses a version of Less that does not support this code: &:extend(.clearfix all);“.

If you use the Leafo LessPHP library and it produces a PHP fatal error in WordPress, you will probably get a “white screen”. If you know how to turn on WordPress and PHP debugging information you can see that uncaught exception in your error logs, and at least know your LESS file having an unsupported command was what brought your site down.

How do you get around this? One way is to simply use LESS without the ‘extend’. But the LESS extend command has been around for years now. The Bootstrap release log shows v3.1.0 released on Jan 30, 2014 had “With switch to LESS compiler, remove duplicate CSS generated from the nested .clearfix class and mixin by switching to &:extend(.clearfix all).” The Extend command has a lot of benefits.

As of 6/1/2015, Bootstrap is currently v3.3.4 and there are many improvements over version 3.0. Good thing there are ways to use Bootstrap 3.3.4 .less files with WordPress.

https://github.com/oyejorge/less.php is a different Less compiler for PHP. I haven’t compared the main package yet. But reading about it, I saw it has a section on replacing the leafo lessc.inc.php with oyejorge lessc.inc.php. You copy lessc.inc.php and the lib/ folder from oyejorge’s less.php-master.zip into a folder (I used the folder in my WordPress theme with my .less files, /wp-content/themes/THEMENAME/less)

I’m able to generate a custom version of Bootstrap 3.3.4, incorporating my own changes (.less files that calculate a “color wheel” to produce background colors that look great with a main color I select, and making text colors that have good contrast against their background color, and applying those colors throughout Bootstrap.

I have my main file, style.less, include all the other .less files; these are all in /wp-content/themes/THEMENAME/less
Example:

@import "scheme.less";
@import "bootstrap/bootstrap.less";
@import "my-bootstrap-variables.less";
@import "my-mixins.less";

The oyejorge version of lessc.inc.php is also in /wp-content/themes/THEMENAME/less
The oyejorge lib/ folder and all the files in it are in /wp-content/themes/THEMENAME/less (making /wp-content/themes/THEMENAME/less/lib/)
The Bootstrap Less files are in /wp-content/themes/THEMENAME/less/bootstrap

(Since Less definitions found afterwards overwrite definitions found before, and only then are applied in functions and mixins, I have my-bootstrap-variables.less and my-mixins.less after the import for Bootstrap, and all the colors generated in scheme.less get put into Bootstrap goodies.)

Here is the code I have in my functions.php (in /wp-content/themes/THEMENAME/) :

require "less/lessc.inc.php"; // uses less/lib/ from less.php-master.zip
$options = array( 'sourceMap' => true );
$parser = new Less_Parser($options);
$less = new lessc;

try {
// works, but autoCompileLess is better, this compiles every time -- $less->compileFile(__DIR__."/less/style.less", __DIR__.'/style.css');
	autoCompileLess(__DIR__."/less/style.less", __DIR__.'/style.css');
} catch (exception $e) {
	echo '<p>Error making CSS files: ' . $e->getMessage() .'</p>';
}

Here is the autoCompileLess function, also goes in functions.php:

/* from http://leafo.net/lessphp/docs/#compiling_automatically
*/
function autoCompileLess($inputFile, $outputFile) {
	// load the cache
	$cacheFile = $inputFile.".cache";

	if (file_exists($cacheFile)) {
	    $cache = unserialize(file_get_contents($cacheFile));
	} else {
	    $cache = $inputFile;
	}

	$less = new lessc;
	$newCache = $less->cachedCompile($cache);

	if (!is_array($cache) || $newCache["updated"] > $cache["updated"]) {
	    file_put_contents($cacheFile, serialize($newCache));
	    file_put_contents($outputFile, $newCache['compiled']);
	}
}

by

Comments

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.