CSS once altered the web design, but this technology now is static and limited as syntactical solution. Its restrictions are forethought as a way to prompt broader usage.This knowledge doesn’t make it any easier to work with CSS, thus more and more web frameworks contain tools that aid in writing and enrichment of CSS code. This tendency led to the emergence of new languages that can be compiled into CSS and deployed to a website, e.g. Sass, CleverCSS, LESS, CSS Crush, Switch CSS, Turbine, CSS Cacheer, DT CSS, Stylus, CSS PP, HSS, etc.
LESS is an open source project that extends CSS with dynamic properties:
- Variables help to specify widely used values in a single place and apply them in the code. Global changes can be made by editing one line of the code.
- Mixins embed all the properties of a class into another class using the class name as one of its properties.
- Nesting allows to shorten stylesheets and make inheritance rules clearer by nesting selectors inside other selectors.
- Operations allow to build complex relationships between properties. In this way it is easy to add, subtract, divide and multiply property values.
- Functions give opportunity to manipulate values.
- Namespaces are used for grouping and encapsulating variables and mixins.
LESS is a nested metalanguage and a superset of CSS, so they have one-sided interrelation: CSS code is valid LESS code, although additional LESS behaviours won’t be valid in CSS. The main feature that distinguishes LESS from other CSS preprocessors is that LESS enables real-time compilation via less.js. Watch mode is additional client-side feature that automatically refreshes styles when they are changed.
In general, LESS can run on the client-side, server-side (with Node.js and Rhino), or can be compiled into plain CSS. All three ways are quite simple to use. For production purposes, especially if performance plays a significant role, pre-compiling using node or any other third party tool is recommended. Moreover, LESS is designed to be compiled into CSS either by means of JavaScript in the browser, or through preprocessing with a server-side JavaScript toolkit.
To make work with LESS even more convenient additional GUI can be used, for example, Winless. WinLess is a reliable and convenient Windows compiler with GUI for LESS.js. It is used for watching folders inside which are located LESS project files. Moreover, this application automatically recompiles a LESS file when it is changed. It signals compiler errors via the tray icon. WinLess has other useful features, like minimizing to tray, tray messages, and option to start with Windows.
LESS helps to write cleaner and more agile code, optimizes it and makes the whole process of creating and maintaining the code base less time-consuming. For more information visit LESS-CSS website.