Currently I am using the Node.js LESS (Lean CSS) module without the grunt plugin

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. The point is that the LESS files are developed within a larger project in Xamarin / Visual Studio. I need to improve my development experience while preserving the LESS files as a subset of the larger project, and preferably I'd like to work with them in the same IDE as the whole project.

So, I am looking for a tool that supports working with LESS files on Windows OS. I need it to have these capabilities:

Code auto-completion that supports the LESS constructs. Ideally, it would recognize imported files and include their definitions to the autocomplete suggestions
Syntax highlighting that supports the LESS format.
Ability to export the LESS files to a compiled CSS via menu, button or other easy way. In other-words - build-like behavior.
Preferably to be a free tool (not necessary)
Preferably to be stand-alone (not to require Node.js with npm pre-installed, or other 3rd party software that needs to be preinstalled). For an IDE plugin, I am OK if the IDE comes with node.js or any other middleware, the purpose of this point is avoidance of manually managing pre-requisites.

Alternatively, I'd also appreciate an IDE plugin with similar abilities for the following IDEs:

Visual Studio 2010
Xamarin Studio (MonoDevelop)
Eclipse or its flavours

Explanation / Answer

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.
CssIsLess

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_Lessexport.$(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 heme.less > %~dp0..StylesDefault.css

export.Release.bat:

lessc %~dp0Default heme.less > %~dp0..StylesDefault.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.

Related Questions

Navigate

• Browse (All)
• Browse C
• Subjects

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.