Sass is returning a list of negative numbers inste

Question

I'm trying to do math operation with lengths:

$itemWidth: 25px;
$item2Width: 80px;

element {
    width: $itemWidth/2-$item2Width/2-5px
}

However, it outputs -52.5px -5px How to do it right?

Answer 1

Wrap the calculation in parentheses. This tells SASS that the whole thing is part of a calculation.

$itemWidth: 25px;
$item2Width: 80px;

element {
    width: ($itemWidth/2-$item2Width/2-5px);
}

Answer 2

The Sass 3.2 parser seems to be confused by your lack of whitespace between the operators (it thinks you mean negative 5px rather than subtract 5px):

element {
    width: $itemWidth / 2 - $item2Width / 2 - 5px;
}

This is fixed in Sass 3.3, but you'll need to upgrade Compass to 1.0 (since 0.12 is incompatible with Sass 3.3).

Note that Sass will always treat numbers immediately preceded by a dash/hyphen as negation. This means that 1 -2 is treated as a list of numbers containing the positive number one and the negative number two, rather than evaluating to the negative number 1.