Learn LESS in 10 Minutes (or Less)

Learn LESS in 10 Minutes (or Less)

We all know CSS can be a bit frustrating to write, especially when it comes to more serious projects with thousands of lines of code. You end up duplicating the same rules all over the place and using your editor’s search and replace for every color change. It takes a lot of effort and discipline to keep your CSS maintainable. But it doesn’t have to be this way.

Luckily, the web development community has solved this problem. We now have CSS pre-processors such as Less, Sass and Stylus. They give us a number of benefits over plain CSS:

  • Variables, so that you can define and easily change values throughout your stylesheet. (This is actually coming to CSS some day.)
  • Dynamically calculated values. (In CSS we recently got calc, but it is only for length units.)
  • Mixins, which enable you to reuse and combine styles. They even support passing arguments.
  • Functions, which give you a number of handy utilities for manipulating color, converting images to data-uris and more.

The negative aspect is that if you use one of these pre-processors, you will need to compile your stylesheets down to regular CSS so that it works in browsers.

1. Getting Started

Less is written in JavaScript, and needs either Node.js or a web browser to run. You can include less.js in your web site and it can compile all the linked .less stylesheets in real time, but this is slow and is not recommended. The recommended way is to compile your less stylesheets ahead of time and deploy a regular CSS file online. There are also a number of free graphical programs that can compile .less files for you, but in this article we will cover node.js.

If you have node installed, and you know what a terminal is, go ahead and open one. Then install less using NPM:

npm install -g less

This will give you access to the lessc command from any open terminal, enabling you to compile your .less files into vanilla CSS like this:

lessc styles.less > styles.css

Let’s say we’ve written all our stylesheet rules with LESS in styles.less. With the above line, our code will be transformed to plain CSS in styles.css. All that is left is to link this css file our HTML. If there was a compilation mistake, it will show up in your terminal.

2. Variables

One of the main features of Less is the ability to create variables just like you would in a standard programming language. They can store any type of value you find yourself using frequently: colors, dimensions, selectors, font names, URLs and so on. The philosophy of less is to reuse the CSS syntax where possible.

Here, we define two variables, one for background color and one for text color, both containing hexadecimal codes. Switch between the tabs to see the translated to CSS version of the code:

@background-color: #ffffff;
@text-color: #1A237E;

p{
  background-color: @background-color;
  color: @text-color;
  padding: 15px;
}

ul{
  background-color: @background-color;
}

li{
  color: @text-color;
}
p{
  background-color: #ffffff;
  color: #1A237E;
  padding: 15px;
}

ul{
  background-color: #ffffff;
}

li{
  color: #1A237E;
}

In the example above, the background color is white, while the text is dark. If, let’s say, we want to switch them around and have dark elements with white text, we can simply change the values of the variables, instead of manually replacing every occurrence.

For more about variables in Less read here.

3. Mixins

LESS enables us to use an existing class or ids and apply all it’s styles directly to another selector. The following example will clear things up:

#circle{
  background-color: #4CAF50;
  border-radius: 100%;
}

#small-circle{
  width: 50px;
  height: 50px;
  #circle
}

#big-circle{
  width: 100px;
  height: 100px;
  #circle
}
#circle {
  background-color: #4CAF50;
  border-radius: 100%;
}
#small-circle {
  width: 50px;
  height: 50px;
  background-color: #4CAF50;
  border-radius: 100%;
}
#big-circle {
  width: 100px;
  height: 100px;
  background-color: #4CAF50;
  border-radius: 100%;
}

If you don’t want the mixin to appear as a rule in the CSS you can place parentheses after it:

#circle(){
  background-color: #4CAF50;
  border-radius: 100%;
}

#small-circle{
  width: 50px;
  height: 50px;
  #circle
}

#big-circle{
  width: 100px;
  height: 100px;
  #circle
}
#small-circle {
  width: 50px;
  height: 50px;
  background-color: #4CAF50;
  border-radius: 100%;
}
#big-circle {
  width: 100px;
  height: 100px;
  background-color: #4CAF50;
  border-radius: 100%;
}

Another cool thing mixins can do is receive parameters. In the following example we add an argument for the width and height of our circles, with a default value of 25 pixels. This will create a small circle 25×25 and a big one 100×100 pixels.

#circle(@size: 25px){
  background-color: #4CAF50;
  border-radius: 100%;

  width: @size;
  height: @size;
}

#small-circle{
  #circle
}

#big-circle{
  #circle(100px)
}
#small-circle {
  background-color: #4CAF50;
  border-radius: 100%;
  width: 25px;
  height: 25px;
}
#big-circle {
  background-color: #4CAF50;
  border-radius: 100%;
  width: 100px;
  height: 100px;
}

Read more about Less mixins in their official documentation.

4. Nesting and Scope

Nesting can be used to structure your stylesheet in a way that matches the HTML structure of the page, while reducing the chance of conflicts. Here is an example of an unordered list and its children:

ul{
  background-color: #03A9F4;
  padding: 10px;
  list-style: none;

  li{
    background-color: #fff;
    border-radius: 3px;
    margin: 10px 0;
  }
}
ul {
  background-color: #03A9F4;
  padding: 10px;
  list-style: none;
}
ul li {
  background-color: #fff;
  border-radius: 3px;
  margin: 10px 0;
}

Just like in programming languages, in Less variables receive their values depending on the scope. If the value isn’t specified in the specific scope, LESS will look for it in upper blocks until it finds the nearest declaration.

Translated to CSS, our li will have white colored text, since we’ve predefined @text-color in the ul rules.

@text-color: #000000;

ul{
  @text-color: #fff;
  background-color: #03A9F4;
  padding: 10px;
  list-style: none;

  li{
    color: @text-color;
    border-radius: 3px;
    margin: 10px 0;
  }
}
ul {
  background-color: #03A9F4;
  padding: 10px;
  list-style: none;
}
ul li {
  color: #ffffff;
  border-radius: 3px;
  margin: 10px 0;
}

Learn more about scope here.

5. Operations

You can do basic math operations to numerical values and colors. Lets say we want to have two divs placed next to each other, the second one being twice as wide and with a different background. LESS knows what the measuring units are and won’t mess them up.

@div-width: 100px;
@color: #03A9F4;

div{
  height: 50px;
  display: inline-block;
}

#left{
  width: @div-width;
  background-color: @color - 100;
}

#right{
  width: @div-width * 2;
  background-color: @color;
}
div {
  height: 50px;
  display: inline-block;
}
#left {
  width: 100px;
  background-color: #004590;
}
#right {
  width: 200px;
  background-color: #03a9f4;
}

6. Functions

LESS has functions too! It’s starting to look more and more like a programming language, isn’t it?

Let’s take a look at fadeout, a function that decreases the opacity of a color.

@var: #004590;

div{
  height: 50px;
  width: 50px;
  background-color: @var;

  &:hover{
    background-color: fadeout(@var, 50%)
  }
}
div {
  height: 50px;
  width: 50px;
  background-color: #004590;
}
div:hover {
  background-color: rgba(0, 69, 144, 0.5);
}

With the code above, when our div is hovered it will turn halfway transparent making mouse over transitions easier than ever. There are a lot of other useful functions for manipulating colors, detecting the size of images and even embedding assets as data-uri in the stylesheet. See the full list of functions here.

Further reading

You now know enough of Less to get started! Every CSS file is a valid Less stylesheet, so you can start cleaning up that old and unwieldy .css right away. As you learn more, you will be able to make the code even better. Here is what we recommend that you read next:

  • All the language features – link
  • LESS function reference – link
  • Editor and compiler in the browser – link
Presenting Bootstrap Studio

a revolutionary tool that developers and designers use to create
beautiful interfaces using the Bootstrap Framework.

Learn more
Web Browser Frame DevKit Box Mouse Cursor
by Danny Markov

Danny is Tutorialzine's Bootstrap and HTML5 expert. When he is not in the office, you can usually find him riding his bike and coding on his laptop in the park.

1Share this post
2Read one more article
3Get your free book
Book Cover
jQuery Trickshots

Tutorialzine's advanced jQuery techniques book.

Download

22 Comments

  1. wizston says:

    Wow, Nice tutorial.
    Never really considered using it...Cool!
    Thanks for sharing.

  2. Peeyush says:

    Really Good One.

  3. sina says:

    really useful!
    I am convinced to learn and use it!

  4. Srinivas Reddy says:

    Nice tutorial for start Less. Thanks a lot.

  5. Tobmai says:

    Awesome, easy and useful !!!

  6. Mert Kahyaoğlu says:

    Nice one! Thank you. I wonder which syntax highlighting theme you are using ? I would like to use it too.

    1. Danny Markov says:

      Thanks for the comment Mert!

      For the syntax highlighting we used highlight.js with the Tomorrow theme :)

      1. Mert Kahyaoğlu says:

        Thank you very much!

  7. Jagadish says:

    Nice Tutorial

  8. Srikanth Reddy says:

    Simply Awesome!

  9. Nandu Hulsure says:

    Awesome tutorial Danny, really it goes with title.

  10. Maha says:

    Very useful tutorial for beginners , it helps me understand Less a lot,
    thank you so much :)

  11. Nomy says:

    Very helpful and easy to understand. Thanks

  12. Vasil says:

    I am using LESS and it is insanely helpful - it can help you within your work a lot

  13. printo says:

    Really Good, Thank you very much

  14. swetha says:

    Nice work !

  15. Dave says:

    Really good job summing up the basics. Very helpful for beginners like me. Thanks so much.

  16. Aniket Ashok Maratkar says:

    Very helpful tutorial for beginners, it helps me understand Less a lot, thank you so much

  17. Asim says:

    Nice simple and clean with great explanation. Thanks for this.

  18. Ashish Bhalerao says:

    Great less tutorial for beginner.
    Really Thank You for this

  19. Gourab says:

    Best LESS tutorial. Thanks.

  20. Will says:

    Thank you for sharing. Great tutorial!

Add Comment

Add a Reply

HTML is escaped automatically. Surround code blocks with <pre></pre> for readability.
Perks:   **bold**   __italics__   [some text](http://example.com) for links