LESS - Editors and Plugins


Advertisements

In this chapter, we will understand the importance of editors and plugins in LESS. An Editor is a system or program which allows a user to edit text. Plugin is a piece of software that is used to expand the functionality of the site.

Let us now discuss editors and IDEs for LESS.

Sr.No. Editors and IDEs & Description
1 Crunch!

It supports cross-platforms like Windows, Mac and Linux. It provides editor with integrated compiling.

2 Mindscape Web Workbench

It provide CoffeeScript, SASS, Compass and LESS editing and makes modern web development easy in Visual Studio.

3 NetBeans

It is an open-source Java-based IDE. This helps in the quick development of your desktop, mobile and web applications as well as HTML5 applications that involve HTML, JavaScript and CSS.

4 TextMate

It is a general purpose graphical text editor for Mac OS X. It features declarative customizations, recordable macros, snippets, shell integration, open documents tabs and an extensible bundle system.

5 Vim

The vim bundle adds functionalities like indenting, highlighting and auto completion for the dynamic stylesheet language LESS.

6 Emacs

It contains less-css-model that provides an Emacs mode for LESS CSS (lesscss.org); Emacs supports compile-on-save.

7 jetBrains WebStorm and PhpStorm

WebStrom is a lightweight and powerful IDE. It is perfectly equipped for complex client-side and server development with Node.js. PhpStorm is an PHP IDE, which supports deep code understanding, and provides top-notch coding assistance and support for all major tools and frameworks.

8 Brackets

It is a lightweight, powerful and an open-source code editor that helps web designers and front-end developers.

9 CodeLobster

It is a portable integrated development environment (IDE) primarily for PHP. It also supports HTML, CSS and JavaScript development and plugins are available for Drupal, WordPress, Smarty, Joomla, JQuery, Facebook, Codeigniter, Yii and CakePHP.

10 KineticWing IDE

It is a quick, clean, lightweight and portable IDE. It is a full-size development suite that helps you work smart and fast.

11 nodeMirror

It is an open-source and easily customizable IDE. It utilizes CodeMirror.net, pty.js and other libraries.

12 HTML-Kit Tools

This is a modern web editor for HTML5, CSS3, JavaScript and more. With this, you can edit, preview, validate publish and manage projects from modern standards compliant editor.

Sublime Text 2 & 3

The sublime text provides different options for LESS as listed in the following table −

Sr.No. Options & Description
1 Less-sublime

LESS syntax for sublime text provides syntax highlighting for .less files, along with snippets.

2 Sublime-Less-to-CSS

Sublime text 2 and 3 plugin to compile .less files to CSS when you save. It requires lessc installed on PATH.

3 Less-build-sublime

LESS build system for sublime text 2 which provides two build systems for LESS files, both minified and non-minified.

4

SublimeOnSaveBuild

It is a simple plugin for sublime text 2 to trigger a build when you click Save. Works well with pre-processors like LESS, Compass and any others.

Eclipse

Eclipse has two plugins for LESS as listed in the following table −

Sr.No. Plugins & Description
1 Eclipse Less Plugin

By extending the Eclipse IDE, this plugin provides useful features to edit and compile LESS stylesheets.

2 Transpiler Plugin

This Eclipse plugin automatically transpiles your files like LESS, SASS, CoffeeScript, etc.

Visual Studio

Visual Studio has the following different options for LESS −

Sr.No. Options & Description
1 CSS Is Less

This extension makes LESS files open with CSS language service.

2 Web Essentials 2012

This extension lets you perform common tasks much easier and adds useful features to Visual studio for web developers.

3 Web Essentials 2013

It extends Visual Studio with a lot of new features which are not specific to a specific language or editor.

4 Web Tools 2013

This helps you in the development tasks that involve ASP.NET

Dreamweaver

The following points need to be considered while working with Dreamweaver.

  • It is an Adobe application used by web designers and developers to create applications and websites.

  • It is capable of working across multiple platforms including browsers, devices and tablets.
  • Web designers use Dreamweaver for creating website prototypes.

  • DMXzone Less CSS Compiler makes all the LESS CSS powers directly in Dreamweaver.

Notepad++ 6.x

The following points needs to be considered while working on Notepad++.

  • Notepad++ is a free text editor and source code editor which supports tabbed editing, i.e., working with multiple open files in a single window.

  • LESS for Notepad++ is an xml file that provides syntax highlighting or coloring for .less files. To get more information, click on this link.

  • To install Notepad++ click this link.

Advertisements