Can numbers be rounded (math term) using LESS CSS?

Question

LESS CSS = http://lesscss.org/

I declared a variable, like this... @height: 30px

Then I used a simple calculation, like this... line-height: @height * .666

It returns 19.98px but I wanted an even 20px

So, does LESS CSS have a way to round numbers up or down?

Solution 1

Yes they can:

line-height: ceil(@height * .666);      // 20px (round up)
line-height: floor(@height * .666);    // 19px (round down)
line-height: round(@height * .666);     // 20px (round to closest integer)
line-height: round(@height * .666, 1);  // 20.0px (round to 1 decimal place)

Solution 2

http://lesscss.org/functions/ for a list of the lesscss functions, floor is included under the heading "Math functions".

Comments

[Paul]

@Greg LESS is a language that compiles to CSS. It has nothing to do with jQuery.

[Paul]

@Greg Yeah, the official compiler is written in Javascript. There is also a popular compiler written in PHP. It still has nothing to do with jQuery and even the Javascript compiler doesn't use jQuery. LESS itself is a language. Just like Javascript, CSS, C++, and HTML are all languages.

[Kirkland]

Thanks @Paulpro I'll accept this answer as soon as it allows. Do you have any resources (aka: links) you can recommend for other LESS "tricks"? I'm new to LESS and I didn't see much on the official site.

[Paul]

@Kirkland You can always just scan the reference (link) for a function that suits your needs:

[Greg]

@Paulpro: Math.ceil(number) is a javscript function.msdn.microsoft.com/en-us/library/ie/w0w5b52h%28v=vs‌​.94%29.aspx as are the others.

[Paul]

@Greg ceil is also in C, C#, C++, PHP, and a whole bunch of other languages, including LESS.

[Paul]

@Greg You may also notice that the round function in Javascript doesn't take in a second argument to specify the number of decimal places, like the round in LESS does.

[Paweł]

is it possible without preprocessors like LESS? so just CSS...?