在前端开发中，CSS 的单位是必不可少的。除了常见的 px、em、% 等单位外，SASS 还引入了 rem 和 em 单位。本文将详细介绍 SASS 中的 rem 和 em 单位，以及它们的使用方法和优缺点。
什么是 rem 和 em 单位
rem 和 em 都是相对单位，也就是说它们的值是相对于某个基准值而言的。
rem 单位
rem 是相对于根元素（即 html 元素）的字体大小而言的单位。当根元素的字体大小为 16px 时，1rem 等于 16px。
em 单位
em 是相对于父元素的字体大小而言的单位。当父元素的字体大小为 16px 时，1em 等于 16px。
rem 和 em 的使用方法
在 SASS 中，我们可以使用变量来定义 rem 和 em 的基准值，然后在样式中使用这些变量。
// javascriptcn.com 代码示例
$base-font-size: 16px; // 基准字体大小
$base-line-height: 1.5; // 基准行高
html {
font-size: $base-font-size;
}
body {
font-size: 1rem; // 相当于 $base-font-size
line-height: $base-line-height;
}
h1 {
font-size: 2rem; // 相当于 $base-font-size * 2
line-height: $base-line-height * 2;
}
p {
font-size: 1em; // 相当于 $base-font-size
line-height: $base-line-height;
}
a {
font-size: 1.2em; // 相当于 $base-font-size * 1.2
}在上面的示例中，我们定义了两个变量 $base-font-size 和 $base-line-height，分别表示基准字体大小和基准行高。然后在样式中使用这些变量来计算实际的字体大小和行高。
rem 和 em 的优缺点
rem 的优缺点
优点
- 相对于根元素的字体大小，更加稳定和可靠。
- 可以方便地实现响应式布局，只需要改变根元素的字体大小即可。
- 可以避免子元素的字体大小受到父元素的影响。
缺点
- 兼容性不太好，一些老的浏览器不支持 rem 单位。
- 对于一些需要在不同分辨率下保持相同大小的元素，rem 单位可能不太适合。
em 的优缺点
优点
- 可以方便地实现相对于父元素的字体大小的样式。
- 可以避免一些兼容性问题。
缺点
- 可能会受到父元素字体大小的影响，导致样式不稳定。
- 需要在嵌套的元素中计算字体大小，容易出错。
总结
在 SASS 中，rem 和 em 单位都是很有用的相对单位。我们可以根据具体的需求来选择使用哪种单位，以达到更好的效果。需要注意的是，在实际使用中，我们还需要考虑兼容性、布局和样式的稳定性等问题。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6556cb03d2f5e1655d12918c