If you need LESS support for Visual Studio 2010 (useful if developing web projects with it), you can use an add-in. A candidate solution has already been discussed in Stack Overflow.
This extension brings the built-in syntax highlighting and auto-completion already available in Visual Studio against .css files over .less files. Actually it does only this, no compilation or other less-specific support, but is still something.
I find this sufficient for development inside Visual Studio 2010 so far, when in combination with my other established practices that I mentioned in my question:
Currently I am using the Node.js LESS (Lean CSS) module without the grunt plugin to produce CSS files. I have shell scripts that do the LESS to CSS exporting which I run manually.
An additional twist to the above, is that I have made my shell scripts to execute before project build. This requires some manual setup of the project and is a small disadvantage, but the Visual Studio project settings dialog allows you to easily add this one-liner to any project. The result is that the .less files gets compiled to the desired place as css before the project is built (and potentially deployed), so it has all required files set in place.
This is my configuration if someone is interested:
In the properties of the web project in Visual Studio, go to the Build Events
section and put this in the Pre-build text box:
$(ProjectDir)App_Less\export.$(ConfigurationName).bat &
This practice implies some conventions I have established for myself:
- The web project has an
App_Less
folder (I named it so, you can change that as you wish), which contains some bat files.
- I use a folder per theme, and each such folder contains a root
theme.less
file that references all other less files. A sample folder structure looks like this:
{ApplicationRoot}
App_Less
Default
// default theme
theme.less
export.Debug.bat
exprot.Release.bat
Currently I am using 2 bat files that I switch depending on whether I build locally (in DEBUG mode) or for production (in RELEASE mode). I need them to reside in the already mentioned folder App_Less
. The scripts are as follows:
export.Debug.bat:
lessc %~dp0Default\theme.less > %~dp0..\Styles\Default.css
export.Release.bat:
lessc %~dp0Default\theme.less > %~dp0..\Styles\Default.css -x
Both scripts will output the css in the following directory:
{ApplicationRoot}
Styles
Default.css
Depending on the build configuration, the Debug
mode will render the css in "human readable" mode, so I can easily fix issues to it. The Release
mode will render the css minified, readly for production.
Each time I build the project, I get my less files compiled to the desired css file automatically.
There are also some drawbacks I am experiencing with this approach. A disadvantage is that some valid CSS3 constructs that are not recongized by Visual Studio's default CSS syntax checker will also be underlined in the less files. It has, however, not visible issues with the nested declarations available only in less, except for where the >
token is used.