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