LESS (Leaner Style Sheets)😎
What is a Less? and Why use?.💻
Less Introduction😉
LESS is a CSS pre-processor that enables customizable, manageable and reusable style sheet for the website. LESS is a dynamic style sheet language that extends the capability of CSS. LESS is also cross-browser friendly.
CSS Preprocessor is a scripting language that extends CSS and gets compiled into regular CSS syntax so that it can be read by your web browser. It provides functionalities like variables, functions, mixins and operations that allow you to build dynamic CSS.
Less (Learner style sheet sometimes stylized as LESS) is a dynamic style sheet language that can be compiled into Cascading Style Sheets(CSS) and run on the client side or server side.[2] Designed by Alexis Sellier, Less is influenced by Sass and has influenced the newer “SCSS” syntax of Sass, which adapted its CSS-like block formatting syntax.[3] Less is open source. Its first version was written in Ruby; however, in the later versions, use of Ruby has been deprecated and replaced by JavaScript. The indented syntax of Less is a nested metalanguage, as valid CSS is valid Less code with the same semantics. Less provides the following mechanisms: variables, nesting, mixins, operators and functions; the main difference between Less and other CSS precompilers being that Less allows real-time compilation via less.js by the browser.
Less is a CSS pre-processor that facilitates you to customize, manage and reuse the style sheets for the webpage. Less is an extensiona of CSS and a dynamic style sheet language which can be run on the client side or server side.
Less is an open source language. It is also cross-browser compatible.
Why LESS?😲
- Let us now understand why do we use LESS.
- LESS supports creating cleaner, cross-browser friendly CSS faster and easier.
- LESS is designed in JavaScript and also created to be used in live, which compiles faster than other CSS pre-processors.
- LESS keeps your code in a modular way which is really important by making it readable and easily changeable.
- Faster maintenance can be achieved by the use of LESS variables.
History
- LESS was designed by Alexis Sellier in 2009. LESS is open-source. The first version of LESS was written in Ruby; in the later versions, the use of Ruby was replaced by JavaScript.
Features
- Less is clean, compact, more readable code and written in a well-organized way.
- Less supports cross-browser compatibility.
- Less is faster and easier.
- Less is written in JavaScript. It compiles faster than other preprocessors of CSS.
- Less provides variables which make its maintenance faster.
- Less provides nesting which makes the code short, clean and organized in a specific way
- Less facilitates you to define styles which can be reused throughout the code.
- Less is an extension of CSS. So it is also called superset of CSS.
- Less is capable enough to sort out the problem of code redundancy.
- Less provides @import rule so you can easily handle external files. Importing is required because many people split their stylesheet into multiple files, rather than putting it in one file.
- Less provides extend method to groups selectors that share the same style rules. It makes Less clean and more organized.
- Less provides merging property. It is the most exciting feature of Less that accepts multiple values like transform, transition, and box-shadow.
- LESS is an agile tool that sorts out the problem of code redundancy.
Advantages
- Less is a CSS preprocessor. After compilation, it generates simple CSS which works across the browsers.
- Less supports cross-browser compatibility.
- Less codes are simple, clean and well organized because of the use of nesting.
- Maintenance in Less can be achieved faster because of the use of variables.
- Less provides a list of operators which makes coding faster and time-saving.
- Less facilitates you to reuse the whole classes easily by referencing them in your rule-set.
- Less is new and preferred over the conventional CSS because may ease the lengthy styling.
- LESS provides the use of operations that makes coding faster and saves time.
Disadvantages
- You must have to spend some time to learn Less if you are new to CSS preprocessing.
- Less provides fewer frameworks as compared to older preprocessor like SASS which contains frameworks like Compass, Gravity and Susy.
- Less, there is a tight coupling between modules so it takes more effort to reuse and/or test dependent modules.
Both Sass and LESS are backwards compatible so you can easily convert your existing CSS files just by renaming the .css file extension to .less or .scss, respectively. LESS is JavaScript based and Sass is Ruby based.
Sass makes CSS fun again. Sass is an extension of CSS, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.
Sass Vs LESS. Sass and LESS are both very powerful CSS extensions. … Both Sass and LESSare backwards compatible so you can easily convert your existing CSS files just by renaming the .css file extension to .less or .scss, respectively.
Less Framework is a CSS grid system for designing adaptive web sites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid.
