Sass is returning a list of negative numbers inste

问题:

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?

回答1:

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.

回答2:

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);
}