SCSS 两个 rem 单位相加的和输出运算而不是值

Question

我试图减去两个 rem 单位的值，形成 scss 中的边距，但是 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://hugogiradel.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 是最好的选择，但这取决于你的代码库。