Calculating Measurements in LESS (Video Tutorial)


No one ever claimed that CSS was the right place to perform mathematical calculations; in fact, it’s near impossible even for simple functions. (Even with the CSS3 calc function, it can be difficult.) That’s where LESS comes in. The ability to perform functions is one of its strong points.

In this video tutorial, you will learn how to complete calculations using LESS. The tutorial takes you through building an evenly spaced grid using just a hint (or two) of math.

Using calculations, you will create a row of same-size and evenly spaced boxes. A good understanding of coding practices is needed to complete this video lesson.

What you will learn in this tutorial: How to use LESS to perform mathematical functions.

Video run time: 4 minutes


  1. Mark Rivera Feb 16, 5:18 am

    Wow.. this is great. I still use “calc()” over the time even if I am already using LESS in my projects. Thank you for this great idea!

  2. Jason Feb 25, 10:52 am

    Although the not supported before ie10, flex box does all this and more, much easier.


Leave a Reply

* Minimum length: 20 characters