Computer Magic Logo
Calculations

Sunday, June 7, 2015

Published by Aristotelis Pitaridis

Less allows us to do calculations which in some cases is fantastic because it gives us the opportunity to have total control over how information is displayed on the screen. In the example below we can see how we double the padding title:

@padding: 5px;
h1 { 
    padding: @padding; 
} 
h1.page-title { 
    padding: (@padding * 2); 
}

The compiled code created by the above Less code is as follows:

h1 {
    padding: 5px;
}
h1.page-title {
    padding: 10px;
}

Sometimes the compiler executes Less calculations which probably do not want to be executed. For example, the following example shows an operation that we want to be executed by the web browser which means that we do not want the compiler to make the calculation.

#page {
    width: calc(100% - 80px)
}

The compiler will generate the following code:

#page {
    width: calc(20%);
}

For some reason the use of CSS function calc not recognized by the compiler. For this we need to find a way to tell the compiler that we want the parameter of calc not to be calculated. The following example shows how to solve this problem:

#page {
    width: calc(~"100% - 80px")
}

The compiler will generate the following code:

#page {
    width: calc(100% - 80px);
}