Compiling Less CSS for Bootstrap 3 with PHP

Question

There are two LessCSS compilers in PHP that I am aware of:

• http://leafo.net/lessphp/
• http://lessphp.gpeasy.com/

Both claim to be compatible

Answer 1

AFAIK http://leafo.net/lessphp/ is not compatible with Boostrap 3 > 3.0.0, see https://github.com/leafo/lessphp/issues/503

http://lessphp.gpeasy.com/ works for me i have successful used it for JBST (https://github.com/bassjobsen/jamedo-bootstrap-start-theme/issues/82) i didn't use the cache function.

Without caching you can call $parser->parseFile() for every file you include, it will compile to one file. array(/var/www/mysite/bootstrap.less' => '/mysite/');. Use an array of array's for multiple files: array(array(/var/www/mysite/bootstrap.less' => '/mysite/'), array(/var/www/mysite/.less' => '/mysite/'));

<?php
$parser = new Less_Parser();
$parser->parseFile( '/var/www/mysite/bootstrap.less', 'http://example.com/mysite/' );
$parser->parseFile( '/var/www/mysite/mainless.css', 'http://example.com/mysite/' );
$css = $parser->getCss();

Less_Cache::Get seems to work for only one file a time.

update As commented by @user697576 Less_Cache::Get() accepts a single file or a list (array of files). A single file will be array like array(/var/www/mysite/bootstrap.less' => '/mysite/');

From the docs:

Use the Less_Cache class to save and reuse the results of compiled less files. This method we check the modified time of each less file (including imported files) and regenerate when changes are found.

I highlight including imported files cause this seems to solve your problem. Merge your files with LESS:

styles.less:

@import "my.less"; 
@import "mainless.css";

And compile styles.less only.

/var/www/mysite/bootstrap.less - Is this the less file to be compiled?

Yes, why not? Make sure the files imported in bootstrap.less are available in the same directory as bootstrap.less, or use $parser->SetImportDirs() to set the right path.

/mysite/ - what is this for??

It setting the right path. If you LESS file contain for example url(image.png) it outputs url( /mysite/image.png). Note Bootstrap use ../ for the path of the glyphicons, this won't be corrected or even worse become /mysite/../. You will have to set this path in LESS: @icon-font-path: "/mysite/fonts/";

/var/www/writable_folder - Is this wherethe css is written to?

Nope after $compiled = file_get_contents( '/var/www/writable_folder/'.$css_file_name ); $compiled contains the (compiled) CSS you have to write this to a file. Or use: $css_file_name = Less_Cache::Get( $to_cache ); in your HTML:

    <link rel="stylesheet" type="text/css" href="/writable_folder/<?php echo $css_file_name;?>"> 

update Notice that since Bootstrap 3.2.0. prefixing of the properties in Bootstrap is be done by the autoprefixer in the build process. The preceding means that the Bootstrap Less code code contain property declaration which only use the W3C syntax whilst prefixing is required for cross browser support. Compiling your source with less.php does not run the autoprefixer. See also: https://github.com/oyejorge/less.php/issues/158

Answer 2

Honestly, I am still trying to understand the advantage of having the server compile the LESS files, rather than compiling them during development and then just loading the CSS onto the server when deploying the app. It just seems like extra work for the server with no advantage. I use a tool called Prepros -- the Windows equivalent of Code Kit. It's easy to set up. I make my changes in LESS and save. The CSS files are recompiled automatically and saved to the application folder on my development machine. When everything is the way I want it, I minify the files and port them to the production box.

Answer 3

another solution using http://leafo.net/lessphp:

1: get the css code for your .less files:

$baseCSS = file_get_contents("style.less");

$baseCSS .= file_get_contents("default.less");//append the second file to the variable

2: compile using:

$finalCSSCode = $less->compile($baseCSS);

cheers