CSS Sass 是连接而不是添加?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/18639175/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 00:15:42  来源:igfitidea点击:

Sass is concatenating instead of adding?

cssmathsass

提问by waffl

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

我需要在我的 SCSS 代码中定义一个宽度,如下所示:

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

Where $currentWidthis defined by the loop.

where$currentWidth由循环定义。

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

然而,Sass 最终总是将两个数字连接起来,而不是进行算术运算。

I have also tried:

我也试过:

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

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

我想知道我做错了什么?我知道这是非常基础的,但我似乎也找不到关于 Sass 如何处理算术的好信息

回答by Kris Hollenbeck

Assuming $currentWidthis an integer.

假设$currentWidth是一个整数。

SASS:

萨斯:

$currentWidth: 30;

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

CSS OUTPUT:

CSS 输出:

#example {
  width: 379px !important;
}

You can test it here:

你可以在这里测试:

http://sass-lang.com/try.html

http://sass-lang.com/try.html