LESS

INTRODUCTION:

  • LESS (Learner CSS) is a CSS pre-processor that enables customizable, manageable and reusable style sheet for web site.
  • LESS is a Open source, dynamic style sheet language that extends the capability of CSS.
  • 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, mixinsand operations that allow you to build dynamic CSS.
  • LESS must be runs on both the server-side (with Node.js and Rhino) and Client-side(modern browsers only).

PURPOSE OF LESS:

  • LESS is designed in JavaScript and also created to be used in live, which compiles faster than other CSS pre-processors.
  • LESS comes with ajs file which is really easy to deploy in your website.
  • LESS supports creating cleaner, cross-browser friendly CSS faster and easier.
  • LESS keeps your code in modular way which is really important by making it readable and easily changeable.
  • Faster maintenance can be achieved by the use of LESS variables.

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 preprocessor of CSS.
  • Less provides variables which makes 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 super set 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.
  • Less provides extend method to groups selectors that share the same style-rules.
  • Less provides merging property. It is the most exciting feature of less that accepts multiple values like transform, transition, and box-shadow.

ADVANTAGES:

  • LESS offers higher-level style syntax, which allows web designers/developers to create advanced CSS.
  • LESS preprocessor easily compiles into standard CSS, before the web browser starts rendering a web page.
  • Compiled CSS files can be easily uploaded to a production web server.
  • LESS easily generates CSS that works across the browsers.
  • LESS enables you to write cleaner and well organized code by usingnesting.
  • Maintenance can be achieved faster by the use ofvariables.
  • LESS enables you to reuse the whole classes easily by referencing them in your rule sets.
  • LESS provides the use ofoperations that makes coding faster and saves time.

DIS-ADVANTAGES:

  • Less can have a tight coupling between modules, so it takes more effort to reuse and/or test dependent modules.
  • It takes time to learn if you are new to CSS preprocessing.

INSTALLATION OF LESS:

Step (1):  We need Node.js to run LESS examples. To download Node.js, open the link https://nodejs.org/en/

Step (2):  Next, install LESS on the server via NPM (Node package manager). Run the following command into the command prompt. [ npm install -g less ]

LESS NESTING RULES:

  • You must be very careful while nesting because overly nested rules may cause complexity and it proves hard to maintain.
  • In LESS, you can declare mixin in the same way as CSS style using class or id selector. It can store multiple values and can be reused in the code whenever necessary.

LESS VARIABLES:

When you program you can set a constant variable that you can access throughout your program. You can do the same with LESS. Set a variable named @color, add your favorite hex color and use it in your stylesheet.Variable assignment is done with a colon(:).

CONCLUSION:

Analyzing the above advantages, we can conclude that using LESS CSS preprocessor a lot of limitations that arise out of CSS usage can be transcended. LESS preprocessor has gained a lot of ground lately and is becoming an extremely popular choice among web designers/developers. It is definitely going to change the way websites are built and maintained, it certainly has reduced a lot of manual effort required to maintain websites.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

* Copy This Password *

* Type Or Paste Password Here *

19,074 Spam Comments Blocked so far by Spam Free Wordpress

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>