Integration of LessCSS with Plone for developers

We had some internal discussions about using LessCSS in upcoming Plone projects for simplifying work (more compact CSS code, less redundant information etc.) so I played with LessCSS a bit today. The basic problem I cam e across was the issue how to integrate LessCSS with Plone from the web designers prospective. The typical working pattern of a Plone web designer is the following:

• start your instance in debug mode
• edit the styles files (.css) on the file-system
• save style files
• reload site in browser

Working with LessCSS is slightly different:

• you need to edit a .less file
• you need to compile the .less file manually using the lessc compiler

So basically one manual step more than necessary.

Here is a quick solution for the problem:

Based on the watchdog module for Python I wrote a small observer module that can be included with your package easily (from the __init__.py file of your package). The code below will start the observer only if your Zope/Plone instance is running in foreground.

Example:

from App.config import getConfiguration
zconfig = getConfiguration()
if zconfig.debug_mode:
     import lesscss    
     lesscss.start()

After restarting your instance a dedicated observer thread will watch for file system changes inside the current policy or theme package. The event handler listens only to files matching *.less. For modification and creation event the handler will automatically call the LessCSS compiler and generate a corresponding .css file inside the same directory.

Cavecats: you need to add the watchdog egg manually to your buildout configuration