css - Sass is concatenating instead of adding?

Question

I need to define a width in my SCSS code as so:

#example {
  width: $currentWidth + 349 !important;
}

Where $currentWidth is defined by the loop.

However, Sass always ends up concatenating the two numbers instead of doing the arithmetic.

I have also tried:

width: #{$currentWidth + 349}px !important;

Which still results in concatenation.

I'm wondering what I'm doing wrong? I know this is incredibly basic, but I also can't seem to find good information on how Sass handles arithmetic

score 37 · Accepted Answer

假设$currentWidth是一个整数。

萨斯：

$currentWidth: 30;

#example {
  width: unquote( ($currentWidth + 349) + 'px ' + !important );
}

CSS 输出：

#example {
  width: 379px !important;
}

你可以在这里测试它：

1 回答 1