LessPHP Minify Integration for faster LessCSS development

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:

  1. Download the current GitHub Repository Contents for the LessCSS LessPHP Minify integration
  2. Unzip the file to a directory of your website/local web server
  3. Locate a file called “config.php” in the “min” directory and open it with your favourite text editor.
  4. 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__);
  5. 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;
    }
  6. 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}
  7. Go to the Minify Documentation site and continue experimenting!

After all, this is Minify… More or LESS :)

This entry was posted in CSS, Design, Development, IT, LESS CSS, PHP, Startup Projects and tagged , , , . Bookmark the permalink.

36 Responses to LessPHP Minify Integration for faster LessCSS development

  1. brian says:

    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.

    • ocramius says:

      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…

  2. daniele says:

    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?

    • ocramius says:

      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!).

  3. daniele says:

    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.)

  4. daniele says:

    sorry, my code in the groupsConfig is:

    $src1 = new Minify_Source(array(
    'filepath' => '/style/test.less',
    'contentType' => "text/css"
    ));

    return array(
    'style' => array($src1)
    );

    • ocramius says:

      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…

  5. daniele says:

    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})

  6. daniele says:

    Holy shit, it works!
    I suppose I can say:grassie vecio!!! 😉

  7. daniele says:

    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

  8. daniele says:

    (and the css file is not parsed)

    • ocramius says:

      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…

  9. daniele says:

    continues to give Resource interpreted as stylesheet but transferred with MIME type text/less

    • ocramius says:

      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 :(

  10. daniele says:

    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

  11. daniele says:

    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

  12. daniele says:

    hi, did you find a more robust solution for the issue?

    • ocramius says:

      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…

  13. JR says:

    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!

    • ocramius says:

      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 :)

      • Emil Edeholt says:

        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);
        }

  14. Jens Sage says:

    Good! But you may want to use a simple caching algorithm

  15. Thanks for the tutorial and your work, very useful. I hope I can streamline integration with my usual CMS.

    • ocramius says:

      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 :)

  16. Robert says:

    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.

    • ocramius says:

      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 , which is tested and works like a charm in my Zend Framework 2 modules :)

  17. sören martius says:

    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/

    • ocramius says:

      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!

  18. sören martius says:

    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 :)

  19. ESW says:

    Or, you could have just done the following with LessPHP: $less->setFormatter(“compressed”);

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>