Back to Top

Getting Started with LESS CSS

  • Bhumi
  • Web Design
  • Comments Off on Getting Started with LESS CSS
  • 17 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 http://lesscss.org/. 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.

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.

Share:
Share on Facebook0Share on LinkedIn0Tweet about this on TwitterShare on Google+0Buffer this pageDigg thisShare on Reddit0

Most Popular Posts

How to Fetch Twitter data using cURL

Posted on 5 years ago

Bhumi

How to Prepare data in CodeIgniter

Posted on 5 years ago

Bhumi

How to Use the HTML5 Full-Screen API

Posted on 5 months ago

Bhumi

Facade implementation in Laravel

Updated 3 weeks ago

Bhumi

MySQL coalesce() function

Updated 17 years ago

Bhumi

How to use JavaScript Promise API?

Updated 17 years ago

Bhumi

What are Lambdas and Closures in PHP?

Updated 17 years ago

Bhumi

The Reader’s Poll – June 2015

Posted on 2 years ago

Bhumi

The Reader’s Poll – August 2014

Posted on 3 years ago

Bhumi

The Reader’s Poll – June 2014

Posted on 3 years ago

Bhumi

The Readers’ Poll – May 2014

Posted on 3 years ago

Bhumi

The Readers’ Poll – August 2013

Posted on 4 years ago

Bhumi