Developers hate repeating themselves over and over again. It is especially true when we’re talking about writing CSS3 behaviours and we are forced to use the elusive vendor prefixes to tell every single browser what we want them to do. Don’t get me wrong, I don’t think vendor prefixes are necessarily evil, but they are very unconvenient for frequent use.
I am not saying that these problems are very concerning, but still there must be a neeter way of doing Less, right?
Now I am going to quickly go through of setting up the Less.app on Mac and will show you how to use it.
Using the Less.app (on Mac OS X Lion)
I tried the Less.app for Mac only, as I refuse to use Windows anymore :) The app is really lightweight (under 3Mb) and absolutely free. You can download it here.
After downloading the app, the user needs to unzip and run it.
The Less.app has a very nice, simple and easy to use UI with two tabs in the header for “Less Files” and “Compiler”.
In the “Less Files” view you can drag-and-drop a web project on the side bar, and the app automatically searches for Less files in the structure.
Once the search is done, you can see your Less files in the “File & Output” panel. According to the Less.app tutorial when you drop your project on the side-bar, the app should automatically offer the output location for the compiled CSS files, but for some reason it didn’t happen to me, so I manually had to set the output folder. To set your CSS output destination folder simpy right-click on the Less file in the list and choose “Set CSS Output Path”. There is an option for minifying your output CSS file, which comes very handy.
You can add multiple projects to the side-bar and then you can manage them separately, which is clever.
Before you compile your files you need to go to the “Compiler” view.
In the “Compiler View” you can see a list of your already done and pending processes. In the footer there is a checkbox for automatic compilation on save - this is a very smart feature: If you tick it, the app will automatically compile your CSS file every time you change and save your Less file. On the right hand side of the footer there is a button for clearing the list, and another one for compiling all your Less files.
After the very easy and straightforward setup process the Less.app is ready to go. All you need to do is to check if it’s running when you’re working on your project. When you save your less files, the app compiles silently in the background and generates your CSS files.
I’d love to hear your voice! Do you use any Less compilers? What is your experience with them and why do you think using Less compilers is a good/bad idea?