”;
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.
”;