LESS

LESS is dynamic preprocessor style language, which can be compiled to CSS (Cascading Style Sheets). It can be executed by client or server. It was designed by Alexis Sellier and it was influenced by SASS and it also influenced the new SCSS syntax, which uses block syntax that is similar to CSS.

LESS is open-source and was originally programmed in Ruby, in later versions was the Ruby’s usage replaced by JavaScript. LESS is nested metalanguage, because the valid CSS file is also valid LESS code with the same semantics. LESS in itself includes the following elements: variables, nesting, mixins, operators and functions. Main difference between LESS and other CSS pre-processors is that LESS allows compilation in real time with the usage of less.js directly in browser.

Comparison with SASS

SASS and LESS are CSS pre-processors, which allow writing clean CSS in programming construct instead of statistic rules.

LESS is inspired by SASS. SASS was originally designed so it would simplify and extended CSS, therefore it removed curly brackets from writing. LESS, on the other hand, was designed to be the most similar to CSS, which led to CSS being able to be used as valid LESS code.

SASS then got inspired by that. In SASS were implemented the second syntax alternative named as SCSS or Sassy CSS.

Usage on sites

LESS can be used on sites in different ways. One if the possibilities is inserting the less.js file in JavaScript, which converts code in real time and then the browser returns outputs in CSS. Other alternative is to transfer LESS code to clean CSS and then to load this clean CSS to a page. With this possibility, there aren’t uploaded directly to the page any LESS files and there is no need for JavaScript convertor less.js.

Advantages of using LESS

• LESS is CSS pre-processor. After the compilation it can generate clear CSS, which functions throughout all browsers.
• LESS supports compatibility throughout browsers.
• LESS’s code is simple, clear and well organized thanks to the nesting.
• Maintaining LESS code is faster, because it allows usage of variables.
• LESS offers the operators’ list, which fastens writing code and saves time during development.
• LESS simplifies reusing whole classes by simply linking to them in the rules’ set.
• LESS is newer and compared to the conventional CSS it is preferred language, because it reduces time consuming style writing.
• Mixins help solving code’s reusability and transfer features of one class to another class by simple inclusion of names of this class to its features.
• LESS has many mathematic operations and operating functions, as are e. g. to darken or to lighten.
• It is possible to import in LESS file another LESS files, which allows reusing variables from these files.
• LESS contains predefined functions, but also allows programmer or designer to define own functions, which can be then used throughout code.
• LESS is compiled faster than other CSS pre-processors.
• LESS supports functionality of lazy loading, which means that file can define variables wherever, in front of or even behind the first usage of this variable.

Disadvantages of using LESS

• It is needed to spend some time by learning it.
• LESS has less frameworks available than his older predecessors, as is e. g. SASS, which contains frameworks as are Compass, Gravity or Susy.
• In LESS are the modules closely linked, therefore it is more difficult to reuse modules or test dependent modules.
• Looking for mistakes is difficult, because regarding to the need of compilation, the CSS line numbers, where the mistake is, aren’t crucial.
• The compilation slows down the development. Waiting for compilation is, compared to clean CSS, an extra step, which also takes up time.
• Efficiency. The source file can be small, but the generated CSS can be extensive.