如何将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);
};