sass - 两个 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 是最好的选择，但这取决于您的代码库。