Back to Top

Getting Started with LESS CSS

  • Bhumi
  • Web Design
  • Comments Off on Getting Started with LESS CSS
  • 19 years ago
LESS CSS - Getting Started

Today I come with the tutorial series for LESS CSS. In this first part of LESS CSS series, you will get idea about the LESS CSS and how to use it.Throughout the series,I will explain LESS CSS in depth by creating demos.

Introduction of LESS CSS

CSS is very simple way to create styles for application whereas LESS is a open-source CSS pre-processor which extends the css with dynamic way using variables, mixins nested rules and operations.

Definition from the official site:

Less is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themable and extendable.Less runs inside Node, in the browser and inside Rhino.

How to Use:

First of all, download less.js file from it’s official site After downloading file, create .less file instead of .css file.

Next,You need following two lines inside the head tag of your HTMLdocument and order of file inclusion is importing while adding files.First add the .less file then the less.js library at the bottom of it.

< link rel="stylesheet/less" type="text/css" href="style.less">  
< script src="less.js" type="text/javascript">< /script>

LESS.js will send ajax request to process the less code and convert the code into CSS and send response with the compiled CSS.Browser will render compiled code in the page.

That’s it. We are done with setup. You can start to write code into your .less file, the compiler will automatically generate the regular CSS in .css format when browser render page.

Wrap Up:

This first part is give you basics idea about LESS and setup of it. Stay tuned for the next part of the series.Next series is to use the variables in the LESS CSS.

Hope this article series helpful to you.As always, thanks for reading an article. Don’t Forget to Follow us on Twitter or Subscribe us to Get the Latest Updates.

Most Popular Posts

How BlockChain and Ethereum works?

Posted on 1 year ago


How to use IndexedDB in HTML5

Posted on 4 years ago


How to get the host name of user in PHP

Posted on 7 years ago


Type Hinting Callable Functions in PHP

Posted on 2 years ago


Hello world

Updated 1 month ago

Nick Carter

In depth Understanding of Laravel Core

Updated 3 months ago


ECMAScript 6 New Features – 2

Updated 1 year ago


The Reader’s Poll – June 2015

Posted on 4 years ago


The Reader’s Poll – August 2014

Posted on 5 years ago


The Reader’s Poll – June 2014

Posted on 5 years ago


The Readers’ Poll – May 2014

Posted on 5 years ago


The Readers’ Poll – August 2013

Posted on 6 years ago