I have some LessCSS that essentially looks like this:

.foo {
    @height: 20px;
    @iconHeight: 13px;

    background-position: 0 (@height - @iconHeight) / 2;
}

However, this obviously turns out as background-position: 0 3.5px, and I'd prefer for it to be an integer (the value of Math.ceil), however this doesn't work:

background-position: 0 Math.ceil((@height - @iconHeight) / 2)

Nor does using the javascript evaluation operator:

background-position: 0 `Math.ceil((@height - @iconHeight) / 2)`

...since this is parsed as Math.ceil(20px - 13px) and the "px" there is a syntax error.

I've even tried using parseInt

0 `Math.ceil((parseInt('@{height}', 10) - parseInt('@{iconHeight}', 10)) / 2)`px

However this turns out like this:

background-position: 0 4 px

...which isn't right. And finally, even adding the "px" in the JS evaluation doesn't work

background-position: 0 `Math.ceil(....) + "px"`;
// bees
background-position: 0 "4px";

Surely there's a better way!

I have some LessCSS that essentially looks like this:

.foo {
    @height: 20px;
    @iconHeight: 13px;

    background-position: 0 (@height - @iconHeight) / 2;
}

However, this obviously turns out as background-position: 0 3.5px, and I'd prefer for it to be an integer (the value of Math.ceil), however this doesn't work:

background-position: 0 Math.ceil((@height - @iconHeight) / 2)

Nor does using the javascript evaluation operator:

background-position: 0 `Math.ceil((@height - @iconHeight) / 2)`

...since this is parsed as Math.ceil(20px - 13px) and the "px" there is a syntax error.

I've even tried using parseInt

0 `Math.ceil((parseInt('@{height}', 10) - parseInt('@{iconHeight}', 10)) / 2)`px

However this turns out like this:

background-position: 0 4 px

...which isn't right. And finally, even adding the "px" in the JS evaluation doesn't work

background-position: 0 `Math.ceil(....) + "px"`;
// bees
background-position: 0 "4px";

Surely there's a better way!

• javascript
• css
• less

Share Improve this question Follow edited Dec 11, 2012 at 21:42 BryanH 6,07033 gold badges3636 silver badges4747 bronze badges asked Aug 16, 2011 at 11:42 nickfnickf 547k199199 gold badges658658 silver badges727727 bronze badges 5

• Update: I've found the round function which works for me in this specific case, however I'd still be interested to know if there was a general way to solve this problem. – nickf Commented Aug 16, 2011 at 11:46
• IMHO in this case I would rethink the design and choose sizes that don't don't need to be rounded, because due to the rounding, the calculated values will be "off" anyway. – RoToRa Commented Aug 16, 2011 at 11:55
• @RoToRa, maybe in this one case that is a better option, but in general the issue still remains. – nickf Commented Aug 16, 2011 at 12:06
• Shouldn't the "/ 2" be inside the Math.ceil call in the first lines? Meaining background-position: 0 Math.ceil((@height - @iconHeight) / 2) – TonioElGringo Commented Aug 16, 2011 at 12:25
• @Tonio, ah yeah, you're right. – nickf Commented Aug 16, 2011 at 15:10

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

There is a simple workaround to the problem using temporary variable and 0px hack.

.foo {
    @height: 20px;
    @iconHeight: 13px;

    @result: `Math.ceil((parseInt('@{height}') - parseInt('@{iconHeight}')) / 2)`;
    background-position: 0 (0px + @result);
}