A tool, or IDE plugin to leverage development of .less (Lean CSS) files, and CSS exporting

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

Answer 1

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

Answer 2

IntelliJ IDEA has support for LESS

CSS

The new Extract Inline CSS refactoring helps automatically extract inline styles.

The Image Preview and Extract Image refactorings are available for the data:uri attributes.

LESS, SASS & SCSS

Breadcrumbs and suppressible inspections support for LESS, Sass and SCSS languages.

More information:

• http://www.jetbrains.com/editors/html_xhtml_css_editor.jsp?ide=idea
• https://stackoverflow.com/questions/8844342/intellij-idea-11-how-can-i-compile-css-from-less

Answer 3

This is a less experience based recommendation than I normally do but anyways </warning>.

I really like SublimeText as a great text editor (the best that I've used in my opinion though I'm sure that could devolve into an opinion argument quite easily). I haven't used LESS - I keep meaning to try it out but haven't gotten around to it yet. However despite that I did install a few LESS focused plugins for ST; two or three of which together should match all your requirements. The two plugins are:

• Less2Css: builds the less files to CSS right from SublimeText. (Has a few options including doing it automatically on save)
• LESS: Syntax Highlighting and some autocompletion.
• CSS Extended Completions: Supports LESS as well as CSS. This is a supreme auto-complete option; you'll probably want it.

To go over your requirements:

• Code auto-completion that supports the LESS constructs. Ideally, it would recognize imported files and include their definitions to the autocomplete suggestions: CSS Extended Completions does that.
• Syntax highlighting that supports the LESS format: LESS does that.
• Ability to export the LESS files to a compiled CSS via menu, button or other easy way. In other-words - build-like behavior: Less2Css Does that.
• Preferably to be a free tool (not necessary): Mainly All three plugins are free. Sublime has a free unlimited-time trial.
• 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: Except for the Less2Css build plugin there are not any external reqs. For the Less2Css plugin you just have to install one requirement (lesscs) and there are instructions on the Less2Css page under Installation.