详解 Sass 中各类单位之间的类型转换技巧

Sass 是一种功能强大的 CSS 预处理器，它包含了许多有用的功能和工具，其中很重要的一部分是单位转换。在 Sass 中，我们可以很容易地把像素转化成百分比，把 em 转化成像素等等。在这篇文章中，我们将会深入探讨 Sass 中各类单位之间的类型转换技巧，让您能够更好的理解并应用它们在前端开发中。

单位类型

在 Sass 中，有很多种不同的单位类型，下面是其中一些最常用的单位类型：

• em：相对于父元素的字体大小
• rem：相对于根元素（root element）的字体大小
• px：像素
• %：百分比
• vw：视窗宽度的百分比
• vh：视窗高度的百分比

类型转换

Sass 可以很容易地把不同类型的单位互相转化。下面是一些常用的类型转换技巧：

把 em 转化为 px

我们可以使用 em 函数将 em 转化为 px，如下例：

$font-size: 16px;
$padding: 1em;
.element {
  font-size: $font-size;
  padding: $padding;
  padding: em($padding, $font-size);
}

第三行代码相当于 padding: 16px。 这里我们使用 em() 函数将 padding 转化为像素值。

把 px 转化为 em

我们同样可以使用 em 函数将 px 转化为 em：

$font-size: 16px;
$padding: 16px;
.element {
  font-size: $font-size;
  padding: $padding;
  padding: em($padding, $font-size);
}

这段代码中，$padding 在第三行通过 em() 函数被转化为了 1em。

把 px 转化为 rem

和 em 函数一样，我们可以使用 rem 函数将 px 转化为 rem：

$root-font-size: 16px;
$padding: 16px;
.element {
  font-size: $root-font-size;
  padding: $padding;
  padding: rem($padding, $root-font-size);
}

在这里，我们通过 rem() 函数将 padding 转化为了 1rem。

把 % 转化为 px

$width: 50%;
$parent-width: 800px;
.element {
  width: $width;
  width: percentage($width / $parent-width); // "* 100 + %"
  width: $parent-width * $width / 100;
}

我们需要分别将 $width 转换为小数，然后与 $parent-width 相乘，最后再乘以 100%。 这里我们使用 percentage() 函数来将小数转化为百分比。

把 vw 和 vh 转化为 px

和百分比一样，这两种单位也可以通过类似的形式转换为像素：

$width: 50vw;
$height: 50vh;
.element {
  width: $width;
  width: $width / 100 * $window-width;
  height: $height;
  height: $height / 100 * $window-height;
}

这里我们需要知道视窗的宽度和高度，它们可以通过 JavaScript 获取。

总结

在 Sass 中，我们可以很方便地进行单位之间的转换。通过本文的介绍，您应该已经掌握了如何将不同的单位互相转换，这样就可以在前端开发中更加方便地运用单位转换了。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646c48a9968c7c53b0b4b898