在前端开发中，我们经常需要将不同单位之间进行转换，如像素（px）、百分比（%）、视口宽度（vw）和视口高度（vh）等等。当我们手动进行这些转换时，往往会出现精度丢失的问题，而且容易引起维护的麻烦。在这种情况下，我们可以使用 SASS 函数来简便地进行单位转换。
SASS 单位函数
SASS 函数是一组预定义的函数，能够帮助我们在样式表中应用复杂的计算操作。其中，有三个特定于单位转换的函数，分别是 px-to-em()、em-to-px() 和 percentage()，它们能够允许我们轻松地进行像素、em 和百分比之间的转换。
px-to-em()
px-to-em() 函数允许我们将像素值转换为 em 值。它接受两个参数：$px 和 $base-font-size。其中，$px 是要转换的像素值，$base-font-size 是相对于另一个（基准）字体大小的值。
例如，如果我们要将字体大小为 12px 的字体转换为 1.5em，则可以使用以下代码：
$base-font-size: 16px; // 假设基准字体大小为 16px font-size: px-to-em(12px, $base-font-size); // 将 12px 转换为 1.5em
em-to-px()
em-to-px() 函数允许我们将 em 值转换为像素值。它接受两个参数：$em 和 $base-font-size。其中，$em 是要转换的 em 值，$base-font-size 是相对于另一个（基准）字体大小的值。
例如，如果我们要将字体大小为 1.5em 的字体转换为像素大小，则可以使用以下代码：
$base-font-size: 16px; // 假设基准字体大小为 16px font-size: em-to-px(1.5em, $base-font-size); // 将 1.5em 转换为相应的像素值
percentage()
percentage() 函数允许我们将像素或 em 值转换为百分比值。它接受两个参数：$value 和 $base。其中，$value 是要转换的像素或 em 值，$base 是相对于另一个（基准）值计算的百分比。
例如，如果我们想要将 16px 转换为 50% 的宽度，则可以使用以下代码：
$base: 100%; // 假设基准为 100% width: percentage(16px / $base); // 将 16px 转换为 50%
示例代码
接下来，我们来看一下完整的示例代码，它演示了如何使用上述函数进行单位转换。
-- -------------------- ---- ------- -- ----------- ---------------- ----- ------------ ------- -- --------- -- - ---------- -------------- ----------------- ------ ---------------- - ------------- - - - ---------- -------------- ----------------- ------ ---------------- - ------------- -
如上所述，我们定义了 $base-font-size 和 $base-width，并在 h1 和 p 元素中使用了 px-to-em() 和 percentage() 函数，将像素转换为 em 或百分比。此外，我们还指定了不同的字体大小和宽度，以演示如何在 SASS 中进行复杂的单位转换。
总结
通过使用 SASS 的单位函数，我们可以轻松地进行像素、em 和百分比之间的转换，避免了手动计算带来的精度丢失和维护问题。在实际开发中，我们可以根据自己的需求和情况，灵活应用这些函数，提高编码效率和代码可读性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645a0d82968c7c53b0c2bee5