Today I’ve been working on some addition to the Minify Project to support LESS CSS integration throug LessPHP.
Why do I need LESS CSS?
As you probably have noticed, your CSS files are becoming huge, especially when working on great projects, avoiding sprites, adding gradients, box-shadows, animations, keyframes, etc:
That’s where LESS CSS comes into play.
LESS CSS is just another way of writing CSS, not that repetitive and “LESS” confusing in big projects.
Why do I need Minify?
Minify is a great tool for CSS compression on complex design projects, where you have more designers and dozens of different widgets to be styled individually, but without making the website slow and unresponsive, keeping it fast and slick.
So what was missing?
I’ve been working with Minify JS and CSS for some years till now, but once I switched to LESS I decided to stop writing all my CSS by hand.
Repeating css rules and all those vendor-prefixes for properties made me mad! This brought me to the usage of the Less App for Mac OS, but also forced me to repeat a painful compile/redeploy procedure every time, most of the times automated with complex scripts that made the procedure even more confusing for my design team.
Minify was not able to pack and manage my LESS CSS files.
So what does this Minify LessPHP/LessCSS integration do?
I didn’t even believe I could make it in such a short time, just a bit of planning an an hour of coding+debugging, but now I have a working Minify instance using “.less” files and automagically compiling through LessPHP and minifying them.
You can find my project on it’s GitHub page for LessCSS and Minify Integration.
If you’re familiar with Minify, just go on, download the package, change your config.php settings and try it out!
You just need to include .less files instead of .css ones in your requests/groupsConfig!
Setting up Minify with LessCSS support
If you’re not familiar with the project, here’s a very fast introduction:
- Download the current GitHub Repository Contents for the LessCSS LessPHP Minify integration
- Unzip the file to a directory of your website/local web server
- Locate a file called “config.php” in the “min” directory and open it with your favourite text editor.
- Find a line that states (should be at line 57, like you see it here)
$min_documentRoot = '';
and change it with
$min_documentRoot = dirname(__FILE__);
- Put some “.less” files in the “min” directory, like the following (I’m calling it “test.less”):
@color: #4D926F; #header { color: @color; } h2 { color: @color; } - Load the webpage at http://yoursite/path/to/min/?f=test.less, you should get an output similar to:
#header{color:#4d926f}h2{color:#4d926f} - Go to the Minify Documentation site and continue experimenting!
After all, this is Minify… More or LESS 
Hello, I keep trying to link a file like so:
If I go to the url directly, I see the compiled and minified css, but if I link it like the above, the browser won’t use it as css.
If I change “main.less” to “main.css” (a regular css file, not LESS) in the same directory, it will minify it, and the browser will interpret the contents as css.
Do you have any ideas? Thanks.
What browser are you using? Is the response served correctly? I mean: do you get the correct CSS output from your LESS files? What response headers do you have in the request? Because I currently think it’s related with the content-type header, which is currently set to text/less…
Hi Marco,
it’s just what I was looking for.
just one question: I’d like to put .less files in a separated folder
(e.g., folders “styles” and “min” are both in the root of the site).
i tried the
$min_documentRoot = substr(__FILE__, 0, -15);as explained in the minify doc, but this is not workingin with the LESS integration (if I use your variation
$min_documentRoot = dirname(__FILE__);it works but it needs to be inside the “min” folder).Is it possible to put the .less file outside the “min” dir?
Hi Daniele!
I suggest you to keep the $min_documentRoot and use the groupsConfig.php, where you can use any path you like (and realpaths) to tell minify what to include…
That should work fine as in my projects JS files are not directly accessible within the documentRoot, and are parsed by the closures compiler before being served (obviously caching them before!).
in this way?
'/style/test.less','contentType' => "text/css"
));
return array(
'style' => array($src1)
);
(calling it with
from my HTML? i cannot understand why, but it gives me a blank page.)sorry, my code in the groupsConfig is:
$src1 = new Minify_Source(array(
'filepath' => '/style/test.less',
'contentType' => "text/css"
));
return array(
'style' => array($src1)
);
Well, your groupsConfig.php looks fine, but you probably won’t use ‘/style/test.less’ as you probably don’t have a ‘style’ directory at the root of your site.
Consider using relative paths, like:
'filepath' => dirname(__FILE__) . '/../../styles/test.less'
When you call it, you usually use ‘min/?g=style’ as the URL…
You are right, what a stupid mistake, I am not in root but in a subfolder.
but now:
(with config.php
$min_documentRoot = dirname(__FILE__);)groupsConfig.php:
$src1 = new Minify_Source(array(
'filepath' => dirname(__FILE__) . '/../style/test.less',
'contentType' => "text/css"
));
return array(
'style' => array($src1)
);
the output is
@color: #4D926F;body{background: @color}h2{color: @color}so LESS compiler is not working (but if the .less file file is inside the “min” folder, the output is right:body{background: #4D926F}h2{color: #4D926F})Could you omit the content-type?
I suppose that’s the same issue of before…
Holy shit, it works!
I suppose I can say:grassie vecio!!! 😉
No need for such formalities 😀
wait..
I checked the code, in my index.php I am calling
with the
'contentType' => "text/css"option (in groupsConfig.php) it does not compile the less code, so the output is:@color: #4D926F;body{background: @color}h2{color: @color}but if I omit the content type, output is right (
body{background:#4d926f}h2{color:#4d926f})but inspect element gives the message:
Resource interpreted as stylesheet but transferred with MIME type text/less
(and the css file is not parsed)
enforce
link type="text/css"within your html and it should run… This is a known issue I wasn’t able to address because of the tight coupling of components within minify…
continues to give Resource interpreted as stylesheet but transferred with MIME type text/less
As I said, that’s an issue I couldn’t address… Does the browser refuse to interpret them as css? Is that a notice, a warning or a critical?
Really sorry for that…
Please check The issue on Github and also let me know about the details of your problem.
I’ll try to fix it as soon as possible (or you could do a pull request), but I’m quite busy this weekend and the coming week, so don’t expect me to do that in this time lapse
maybe an advice
I think it’s a warning (it’s highlighted in orange inside inspect element)
when it’s an error it’s highlighted in red.
but the file is ignored (my body is not #4D926F)
I’ll check the issue, thanks in advance for your time
ok i tried modifying the Minify Source but the resulting file is not converted from less to css in this way.
any help will be appreciated, thanks
A solution could be applying a LESS filter on every CSS file parsed by minify, but I don’t really know if that’s a good solution…
hi, did you find a more robust solution for the issue?
Hi Daniele,
)
I’m sorry, but I really didn’t have any time to work on this issue (have been only working and working since I moved to Frankfurt
The only “fast” solution I can recall is applying the less filter on any css passed to minify, but it’s not that clean…
First of all thanks for all your work– this is the perfect step in the right direction for the automatic deployment of .less files!
It looks like you’ve established this already, but this doesn’t work : I still need to to use less.js for the combined less file to render as css, and additionally the format for media queries gets messed up and does not work at all.
Please continue working on this as it will help immensly when you get it working. Thank you!
I’m trying to get some free time to do that, but I’m currently involved in a more important Zend Framework 2 – Doctrine 2 integration tool and lots of work that produces money
Sorry for that, but I’d love someone to comment the code on GitHub at https://github.com/Ocramius/MinifyLessCSS , it would help a lot
I’m not sure if this fixes the problem for everyone in every browser, but simply replacing the header() call at line 314 in min/lib/Minify.php like this fixed it for me:
if($name == "Content-Type" && stristr($val, "text/less")) {
header($name . ': ' . "text/css");
} else {
header($name . ': ' . $val);
}
Could you do a PR on the repo? This is hacky, but as this isn’t being developed but just maintained then a hacky change can work 😉
Good! But you may want to use a simple caching algorithm
Caching algorithm is already provided by the Minify code base…
Thanks for the tutorial and your work, very useful. I hope I can streamline integration with my usual CMS.
I decided to stop working on this Minify LESS CSS integration as I’m really busy working on Zend Framework 2, Doctrine 2 and Assetic (which is a PHP 5.3 minify killer) and studying/making slides for my company… Even in my free time. Sorry…
As said, the repository is still on github and I’ll be pleased to accept any pull requests from anyone
Hi Marco,
Very good work. Just wanted to ask if you recommend using this code for commercial projects (my clients) or for personal projects only? Thanks.
Hi Robert,
I wouldn’t suggest to use this for commercial projects as it comes shipped with no unit tests and is actually a hack for minify.
If you need to support commercial projects which need some stability, I’d consider using Assetic, which is tested and works like a charm in my Zend Framework 2 modules
Hi Marco,
Less is a good thing but have you seen sass yet? it comes with more features then less..check out this post: http://css-tricks.com/sass-vs-less/
I am out of the “SASS vs LESS” discussion, since if it was me, we’d still be using <table/> everywhere.
I’m a software engineer, not a designer 😉
Anyway, I supporting this project since Assetic is much much better and fits better to my needs.
SASS is already supported in Assetic if you want to use it!
Hi Marco,
i agree – i am also an developer but in my opinion sass with compass has some advantages – i am using sass/compass with assetic and it works great
Or, you could have just done the following with LessPHP: $less->setFormatter(“compressed”);
Yeah, well… That didn’t exist at the time I wrote this thing