如何将 rem 添加到像素值并存储在变量中？

Question

在 scss 文件中可以做这样的事情吗？

$select-height: .75rem + 2px;

Answer 1

我可以想出两个选项。

1：CSS calc() 函数

$select-height: calc(.75rem + 2px);

2：将px转换为rem

@function rem($px, $base: 16) {
  @return $px / $base;
};
$select-height: #{.75 + rem(2)}rem;

这假设 16px 是您的 rem 单位的基础，您可以通过将第二个参数传递给您的 rem 调用来更改它。剥离单位使数学工作。或者，您可以使用类似的函数通过用乘法切换除法来将 rem 转换为 px。然后，您可以将整个内容转换回 rem。但如果你在做 rem-to-px 数学，这是我所知道的最简单的方法。

如果您的基本大小（以像素为单位）有一个不同的变量，您可以像这样运行条带单位函数：

@function strip-units($value) {
  @return $value / ($value * 0 + 1);
};