Learning LESS: A Comprehensive Introduction

Posted in Coding, Coding, HTML & CSS, Tutorials • Posted on 7 Comments

Now that we’re done talking about SASS let’s now talk about learning LESS. If you haven’t seen my SASS tutorial, I recommend you check it here. In our previous tutorial, we listed down the drawbacks of CSS and how pre-processed methods can improve your workflow. We also talked about how to implement SASS using variables, nested, mixins, functions and so on. So we’re ready to take another learning curve with another pre-process method which is LESS.

LESS in a Nutshell

LESS is a dynamic style sheet language that extends CSS and, just like SASS, it has dynamic behavior such as variables, mixins, operations and functions.

It allows you to write CSS in a simpler way by just using and combining mixins, functions, and so on. LESS also increases readability and organization of CSS using imports, nested rules and comments with .less extension.

LESS runs on both client-side (IE, Firefox etc.) and server side using Node.js. In this tutorial, we are going to use the client side. So sit back and relax and enjoy this tutorial.

Resources you need to complete this tutorial:

Installing SimpleLESS

For our LESS client-side compiler we’re going to use SimpleLESS because it is simple to use and it’s free so go ahead and download it here and run it.

When you run SimpleLESS for the first time, you’ll see something like the image below. Please take note that if you don’t see the current version on the top bar, that means it’s not working properly so you need to download it again.

run

Preparing the Markup and LESS Javascript

Before we explore LESS functionalities, we need to prepare our markup and LESS files. So go ahead and create new folder then name it “LESS” or whatever you prefer. Next, inside the LESS folder, create an HTML file and name it index.html and copy and paste the code below. Notice that we’ve included the LESS library below the less style sheet.

!



Introduction to LESS
        	<link rel="stylesheet" type="text/css" />
	<link href="style.less" rel="stylessheet/less" type="text/css" /><script type="text/javascript" src="less-1.3.0.min.js"></script></pre>
<div id="container"><header>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
</header>
<div>
Paragraph No. 1

 Paragraph No. 2

 Paragraph No. 3</div>
<div>
<ul id="myList">
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 4</li>
</ul>
</div>
<footer>
<h3>This is a cool footer</h3>
</footer></div>
<pre>


Next, create a new file and name it style.less. For the purpose of showing you how to compile LESS, let’s put some LESS sample codes in this file. Go ahead, copy and paste the code below to style.less file.


@myColor: #00000;
@myFontSize: 23px;
@myBorder: 4px solid red;

So, by this time, it is expected you’ll have a file structure similar to this.

file-structure

Compiling LESS using SimpLESS

To compile LESS file to CSS, run the SimpLESS application and drag and drop the LESS folder that we created above in the application.

run

You can see that the folder was successfully added to the application if the folder appears on the list of the application. Notice that you can see a text that notifies you if the file has been compiled or not. In this example, as you can see in the right corner, it says “never compile” so this means that our LESS folder was never compiled.

added

The application also offers different features namely: prefix, minify, love. You can see these on the right corner under the status notification. Please take note that all these features can be turned on or off individually. Consider the following use of these features.

Prefix – allows you to attain cross-browser compatibility using vendor prefixes.
Minify- compress your CSS document that’s integrated CSS-minification.
Love- these will comment or state SimpLESS to your document.

other features

Now let’s go ahead and compile our LESS file into CSS. To compile this, you just need to click on the refresh icon on the left corner of the SimpLESS application.

compile

You can see a notification on the right corner of the application when the compiling process was successfully executed. Please take note that, for as long as this application is running, it will watch for the updates you are making on the LESS file in the LESS folder.

success

So if you open again the LESS folder, you can see that a CSS file was added to the folder. Make sure you link the compiled CSS file (style.css) to your index.html to add the styles you added to your LESS file.

css file added

LESS Variables

Just like SASS, LESS also uses variables. If you’ve coded before, you know how variables make each process easier. For a pre-processor like LESS, variables are being used as placeholders for each value of the styles being used throughout the LESS file. LESS uses the @ sign to define a variable. Let’s put this into practice to know how this works.

Open your LESS file and put in the following code. For this code, I created 3 variables for color, font-size and border. I added the myColor and myFontSize variables on the H1 tag while I added the myBorder variable to our list with the ID of myList.


@myColor: #1f7eff;
@myFontSize: 30px;
@myBorder: 1px solid #1f7eff;

h1 {
color: @myColor;
font-size: @myFontSize;
}

#myList {
border: @myBorder;
}

So if you are going to open your style.css file, you can see that the code was updated. Go ahead and run this code into your browser and you can see similar to the image below.

variables

LESS Mixins

Sometimes we want to create styles that can be repeated throughout the style sheet. Good thing mixins are here to help. Just like SASS, it also has the same features that you can add on each elements repeatedly but without the use of @include directive. Instead, just a simple class style directive would suffice. To show you how mixins work in LESS, check out the code below.

.

sample-mixin {
border: 1px solid red;
color: # ff871f;
margin: 30px;
}

h1 {
font-family: Arial;
.sample-mixin;
}

#myParagraph {
background: green;
.sample-mixin;
}

As you can see I created a mixin name sample-mixin, which this was added on our H1 and our paragraph with the ID myParagraph. So if you run this in your browser, the similar output would be like the image below.

mixins

LESS Nested Rules

Nested rules for ID and class can also be applied in LESS just like in SASS. This will keep your code clean and organized.

To see this in action, I set up a CSS example below followed by its LESS version.

CSS Version

#container {
margin: 0px auto;
width: 600px;
border: 1px solid black;
}
#container header{
color: red;
}
#container #myList {
color: green;
padding: 30px;
}

#container  footer {
color: blue;
}

LESS Version


@myMargin: 0px auto;
@myWidth: 600px;
@myColor1: red;
@myColor2: green;
@myColor3: blue;
@myPadding: 30px;
@myBorder: 1px solid black;

#container {
margin: @myMargin;
width: @myWidth;
border: @myBorder;

h1, h2{
color: @myColor1;
}

#myList {
color: @myColor2;
padding: 30px;
}

footer {
color: @myColor3;
}

}

As you can see, we’ve organized our styles in LESS and we did not repeat our ID container many times. If you are going to check this in your browser, you can see similar results.

LESS Operators

One of the best features of LESS is the ability to perform mathematical operations. Using a style fixed value, you can add, subtract, multiply or even divide. Let’s see this in action.

Check out the code below.


@myBorderWidth: 5px;
@myBorderColor: green solid;
@myPadding: 90px;

#myList {
border: @myBorderWidth + 5px @myBorderColor;
padding: @myPadding / 3px;
}

As you can see from our base border width 5px, I added additional 5px and then put the border color. For the padding, we have our base padding of 90px and divided it into 3 so with this we will have 30px padding. So if you run this code in your browser you see a similar result like the image below.

operators

LESS Functions

LESS provides a bunch of functions to manipulate elements and styles. For this tutorial we will focus on color functions if you want to learn more about LESS functions you can click here to learn more.

Check out the series of color functions below.

darken (color, amount)
lighten (color, amount)
saturate(color, amount)
desaturate(color, amount)
alpha(color)

Let’s go ahead and try some of this color functions. Go ahead and open your style.less file and copy the following codes.

@myColor: #f58220;
@myBackground: #dedede;

body {
     background: darken(@myBackground, 40%);
}

h1, h2 {
     color: lighten(@myColor, 10%);
}

p
{
    color: lighten(@myColor, 20%);
}

As you can see that the background color was darkened by 60% and then the H1 and H2 tags were lightened  by 10% and also the color of paragraph tags were lightened by 20%. So when you run this in your browser, you can get similar result just like the image below.

functions

Final Thoughts

LESS library offers a lot fantastic features for both designers and developer. This tutorial offers a basic tutorial for LESS. You are free to play around with these codes and I would love to hear more about your outcome and see some of your experiment’s results. Suggestions, corrections and tips are always welcome. Hope you enjoyed this tutorial and see you next time.

50 Written ArticlesGoogle+

is a web designer and a front web developer with over 2 years of experience in the industry. Have a passion for designing detailed, creative and modern websites & graphics. He spend most of his time practically every day, experimenting with HTML, CSS and Wordpress.

7 Comments Best Comments First
  • Jay-Jay

    Monday, February 17th, 2014 22:54

    1

    LESS doesn’t have vigorous extend, custom functions, control directives, , as well as silent selectors that are in the Sass beta releases.Just be careful with heavy nesting in LESS has it can produce very unoptimised CSS, with many selectors.

    +2
  • Land

    Monday, February 17th, 2014 23:04

    3

    Using it alot lately and looks like a very cool approach to authoring CSS for apps. I’m curious why you wouldn’t just use php to create your CSS file if you want to preprocess; I much around with my website and depending on what I need.

    I’m assuming that LESS has some more to offer? I hope so!

    0
  • Jordan

    Monday, February 17th, 2014 22:58

    2

    I use SASS but sometimes LESS. I compile it with PHP, which checks wether the target *.css-file exists and if it’s newer than the less-file. But thanks for this tutorial. Good for beginner.

    0
  • Kat

    Monday, February 17th, 2014 23:10

    4

    This is a great post. Getting a basic understanding on LESS has been on my to do list for a while now. I think I might try this on my next project.

    0
  • Robin

    Tuesday, February 25th, 2014 06:18

    5

    Great post. Just wanted to alert you to a link that goes to your 404 page instead of a page.

    In sentence `I recommend you check it here.`, the word `here` links to http://www.1stwebdesigner.com/css/learning-less/`#` instead of the SASS tutorial.

    0
  • Daniel

    Monday, April 7th, 2014 19:25

    7

    This is a really useful article for me…. i need it so much…thx friend

    0
  • Nahid

    Thursday, March 13th, 2014 10:52

    6

    This is a new topic for me……..But I like it.

    0
  • Daniel

    Monday, April 7th, 2014 19:25

    7

    This is a really useful article for me…. i need it so much…thx friend

    0
  • Nahid

    Thursday, March 13th, 2014 10:52

    6

    This is a new topic for me……..But I like it.

    0
  • Robin

    Tuesday, February 25th, 2014 06:18

    5

    Great post. Just wanted to alert you to a link that goes to your 404 page instead of a page.

    In sentence `I recommend you check it here.`, the word `here` links to http://www.1stwebdesigner.com/css/learning-less/`#` instead of the SASS tutorial.

    0
  • Kat

    Monday, February 17th, 2014 23:10

    4

    This is a great post. Getting a basic understanding on LESS has been on my to do list for a while now. I think I might try this on my next project.

    0
  • Land

    Monday, February 17th, 2014 23:04

    3

    Using it alot lately and looks like a very cool approach to authoring CSS for apps. I’m curious why you wouldn’t just use php to create your CSS file if you want to preprocess; I much around with my website and depending on what I need.

    I’m assuming that LESS has some more to offer? I hope so!

    0
  • Jordan

    Monday, February 17th, 2014 22:58

    2

    I use SASS but sometimes LESS. I compile it with PHP, which checks wether the target *.css-file exists and if it’s newer than the less-file. But thanks for this tutorial. Good for beginner.

    0
  • Jay-Jay

    Monday, February 17th, 2014 22:54

    1

    LESS doesn’t have vigorous extend, custom functions, control directives, , as well as silent selectors that are in the Sass beta releases.Just be careful with heavy nesting in LESS has it can produce very unoptimised CSS, with many selectors.

    +2

Comments are closed.

54.82.82.201 - unknown - unknown - US