In developing vacashare.com, I am using LESS to generate my CSS as I have found the technology to be a developer-friendly way of generating clean, flexible CSS. The Web Essentials extension for Visual Studio 2012 automatically compiles my LESS files into a .css and .min.css files ready for production use. The automated CSS generation combined with .NET Bundling allows for clean CSS for development and debugging purposes and a minified version for my production site. Having Web Essentials generate my .css file(s) doesn’t work, though, if the .less file is modified outside of Visual Studio.

Git publishing has been set up to the Azure website but any modifications to the LESS files are not compiled into a new CSS file until the project is opened in Visual Studio and Web Essentials does its thing. Any CSS changes made can be deployed by the Git publish but the changes will be overwritten when the .less file is modified in Visual Studio and the .css files are generated anew.

We are testing out MSBuild tasks that will allow the LESS files to be compiled into CSS files at compile time so that styling changes can be made without requiring Visual Studio (or even a Windows PC) and can be deployed via a Git Push. Installing .Less Msbuild Tasks into the Visual Studio project exposes a new build action “DotLess”. Look through the entire list of possible actions as the list is not in alphabetical order and may appear to be missing at first glance.

Once the tasks are installed into your project and the DotLess build action is set for the .less files, you can test things by making a change to the .less file and compiling the solution directly by command line using Msbuild.

The next test is to checkout our Git repository on non-Windows PC (in this case, Mac OSX Mavericks), making a modification to the .less file, kicking off a new build of the site using Git Publishing, and confirming that the site reflects the new styles.