Introducing LESS

Introducing LESS Part-1

LESS is an acronym of Leaner CSS, which is a dynamic style sheet language. LESS is higher-level style syntax that provides advanced CSS features. LESS is open source CSS preprocessor. It is written by JavaScript. We need to compile LESS code to make it understandable to the browser. LESS can provide variables, nesting, mixins, operators and functions. The main difference between LESS and other CSS precompilers being that, it allows real-time compilation via LESS.js by the browser. LESS can run on the client-side and server-side, or can be compiled into plain CSS.


Why do we need LESS?
In our daily web development, we like to use plain CSS. We are habituated with this. But CSS has some drawbacks, like –

  1. There is no way to specify variables
  2. CSS also has no way to define and re-use common style rules
  3. There is no way to make minor adjustments by customizing style rules with different values.
  4. There is now way to do calculation on-the-fly
  5. And finally CSS syntax can get pretty unruly for non-trivial sites and styles

Who are using LESS?
CSS is usually used to develop front-end of web development and we are used to with some front-end framework. These frameworks help our project to adopt with different monitor and screen size. Among them, I have given a small list of LESS users.

  1. Twitter Bootstrap
  2. Semantic UI
  3. UI Kit

Preparing for LESS
There are two ways to use LESS.

  1. We can use LESS code by directly including LESS.js in our pages. This LESS.js will compile our LESS code to CSS. This approach is little bit slower for the browser.less js css
  2. Or, we can use a compiler to compile our LESS code to CSS code. As we are compiling our LESS code in our workstation and we only include the compiled CSS to our pages, this approach is faster to load in the web browser.Less compiler css

We will follow second approach, in this tutorial.

What will we need?
To write LESS code, we will need a good editor. There are number of editor/IDE exists at present for web developers. You can use any one of it.

  1. Crunch: It is a very good LESS editor and compiler. Crunch is also available for Mac and Windows. It is not an IDE, so you may find some problem editing HTML, JavaScript or PHP. It is free to use.crunch editor and compiler
  2. Aptana Studio: This is an open source free IDE. You can write smoothly any kind of file including LESS for your web development. As Aptana Studio is an IDE, you cannot compile LESS files. So, you need to find a compiler, which will compiler your LESS files. This is also available for Mac, Windows and Linux.Aptana studio 3
  3. Phpstorm: Phpstorm is one of the best IDE for web development. You can write and compile your LESS files with this great IDE. It is also available for Mac, Windows and Linux. The problem is, Phpstorm is not free.Phpstorm
  4. NetBeans: It is also a good IDE for web developers. It is free and open source. NetBeans is good for writing LESS files as well. It is available for Mac, Windows and Linux.Netbeans

If you are interested to use anyone IDE from the above, then you may need one compiler to compile your LESS files.

  1. SimpLESS: SimpLESS is a minimalistic LESS compiler. It needs just drag, drop and compile. One of the unique features of SimpLESS is that it supports ‘prefixing’ your CSS. SimpLESS is available for Mac and Windows version.Simpless
  2. Mixture: It is a rapid prototyping and static site generation tool for designers and developers. Mixture brings together a collection of awesome tools and best practices.Mixture
  3. Koala: Koala is a cross-platform GUI application for compiling less, sass and coffeescript.Koala

Ohh.. Almost forgot to mention, if you are interested to compile LESS file from command line, then you need to install it first, by

npm install -g less

Then, whenever you want to compile your less code, use the following command –

lessc styles.less styles.css

For the beginner, you can use Crunch for simplicity. And, after some days you can switch into any IDE to get more features. So, hope you are ready to write some LESS code.

Let’s Write Some LESS Code
I already mentioned that we are going to use less in client side. For this purpose, we will first create our LESS file, then compile it to CSS file. And lastly, we will include this CSS file to our HTML file as usual. So, create an html file called index.html with your editor.

<!DOCTYPE html>
    <title>LESS Tutorial</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
            <h1>LESS Examples</h1>

            <p>This is some content of the page</p>

At this moment we don’t have any style.css file. This is OK. We will create it very soon.

All LESS file ends with (.less) extension. Now, create one new file called style.less. And Write –

@baseColor: rgb(50, 100, 175);

  font-family: Helvetica, Arial, sans-serif;
  background-color: lighten(@baseColor, 50%);
  border: 1px solid darken(@baseColor, 10%);
  color: @baseColor;

Code Explanation

In line 1, we have created variable called baseColor using rgb values. All the variables name start with (@) sign.

From line 3 – 8, we have created some CSS style. But inside the style we have used our variable and some JavaScript functions.

Confused!!! We are using variables and function inside CSS. This is called LESS.

Now, open your less code with Crunch. And click Crunch File. Immediately, it will create style.css file. Save it to the same folder of style.less.

Crunch css

Now, open the index.html file with any of your web browser. Happy now!!!

This is just the beginning of LESS. In next tutorial, I will show you some more powerful feature of LESS, which make LESS incredible.

Happy Coding 🙂

Introducing LESS

Leave a Reply

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