At cf.Objective 2012, Nathan Strutz (@nathanstrutz) gave a great presentation entitled "LESS CSS, meet ColdFusion" in which he introduced the concept of creating dynamic stylesheets using the LESS syntax and an overview of how to process the .less file extensions into working CSS for production environments.
LESS (and SASS) have always interested me in terms of being able to write efficient, reusable style sheets with dynamic variables, mixins and nested rules. The process of converting the files into production-ready CSS, however, always felt a little like a stumbling block - an extra cog in the machine.
Nathan's talk was great - very informative and entertaining, and during the presentation he listed some open-source libraries available to convert from .less to .css. One of these was Rostislav Hristov's lesscss engine. This is a simple java file that will handle the conversion process for you and output the .css files.
I'm a ColdFusion Builder user, and many of my open source projects make use of ANT prior to release to automatically build, compile, zip and ftp the code to where I need it to go. I was really inspired by the possibility of being able to automate the conversion task thanks to Nathan's presentation, so I decided to build a ColdFusion Builder extension immediately after his session to allow me to convert my files directly from within the IDE window.
Enter CFLESS-CSS
CFLESS-CSS is the name given to the extension project, and of course it's available on github and http://cfless.riaforge.org/ for your immediate downloading pleasure.
So, what can be done with it? Very simply, create your .less dynamic style sheets in any directory of your project.
When you are ready to convert them into .css, right-click on a directory in the project navigation window. Select 'CFLESS Style Processor' -> 'Process style sheets' from the context menu.
The extension will traverse the selected directory and locate any files with the .less extension in the selected location and any child directories. It will convert any found into .css files, keeping the original file name, and add them into the same directory.
If you select the root directory of the project, all child directories will be included in the search and conversion process. You can choose to selec a sub-directory to implicitly define the location of the .less files to convert.
You will be presented with a dialog window upon completion as the extension will notify you of which files were processed and their paths on your machine.
With the process complete, you can see that your .less files have been converted into .css, ready for deployment, testing etc. (click on image to view full size in new browser window)
Big thanks to Nathan for the inspiration and the presentation, and thanks to Rostislav Hristov for creating the java files used in the extension.
Want to use LESS to get more?
You can download the CFLESS-CSS ColdFusion Builder extension from http://cfless.riaforge.org/ or from the Github repository.