两个rem单元的SCSS总和输出操作不是值

Question

我试图在scss中减去两个rem单位的值以形成一个边距，但是css输出操作而不是值。这有可能吗？

我有一个rem值和一个像素值，我使用一个函数将其转换为rem，然后尝试减去它们加在一起的总和。感谢您的帮助

$size-md: 1.25rem;
$border-md: 2px;

@function calculateRem($size) {
  $remSize: $size / 16px;
  @return #{$remSize}rem;
}

p {
  margin-right: - (#{$size-md} + #{calculateRem($border-md)});

CSS输出

p { margin-right: 1.25rem + 0.125rem; }

刺客密码

https://www.sassmeister.com/gist/3d3456752f0d82071e75e1afb54ab7f5

Answer 1

主要问题是使用#{$variable}进行字符串插值。

一旦将某些内容插入到字符串中，sass编译器将继续处理它。

该地区很少有选择：

1。用calc()包裹字符串计算，并允许浏览器仅将两个数字相加。

输入：

p { margin-right: calc(#{$size-md} + #{calculateRem($border-md)});

输出：

p { margin-right: calc(1.25rem + 0.125rem); }

2。使用自定义sass函数将字符串转换回数字。

请参阅https://hugogiraudel.com/2014/01/15/sass-string-to-number/

输入：

p { margin-right: (number($size-md) + number(calculateRem($border-md)));

输出：

p { margin-right: 1.375rem; }

3。删除字符串插值

输入：

@function calculateRem($size) {
  $remSize: $size / 16px;
  @return $remSize * 1rem; // removed string interpolation, use * 1rem to convert to rems
}

p { margin-right: ($size-md + calculateRem($border-md)); // removed string interpolation to allow number calculations

输出：

p { margin-right: 1.375rem; }

我认为＃3是最好的选择，但这取决于您的代码库。