在前端开发中，我们经常需要使用单位来指定元素的尺寸、距离等属性。常见的单位有像像素 (px)、百分比 (%)、em 等。在 Sass 中，我们可以使用这些常见的单位，同时还可以使用一些 Sass 特有的单位，这些单位可以让我们更加灵活地控制样式。
常见单位
像素 (px)
像素是最常见的单位，它表示屏幕上的一个点。在 Sass 中，我们可以使用像素来指定元素的宽度、高度、边框等属性。例如：
.box {
width: 200px;
height: 100px;
border: 1px solid #ccc;
}百分比 (%)
百分比是相对单位，它表示相对于父元素的尺寸。在 Sass 中，我们可以使用百分比来指定元素的宽度、高度等属性。例如：
.box {
width: 50%;
height: 50%;
}em
em 是相对单位，它表示相对于元素的字体大小。在 Sass 中，我们可以使用 em 来指定元素的尺寸、边距等属性。例如：
.box {
font-size: 16px;
padding: 1em;
}Sass 特有单位
rem
rem 是相对单位，它表示相对于根元素 (html) 的字体大小。在 Sass 中，我们可以使用 rem 来指定元素的尺寸、边距等属性。例如：
-- -------------------- ---- ------- ---- - ---------- ----- - ---- - ------ ------ ------- ----- ------- ----- -
vw 和 vh
vw 和 vh 是相对单位，它们分别表示相对于视口宽度和视口高度的百分比。在 Sass 中，我们可以使用 vw 和 vh 来指定元素的尺寸、边距等属性。例如：
.box {
width: 50vw;
height: 50vh;
margin: 10vw;
}总结
在 Sass 中，我们可以使用常见的单位像像素、百分比和 em，同时还可以使用 Sass 特有的单位像 rem、vw 和 vh。这些单位让我们更加灵活地控制样式，可以根据具体的需求来选择合适的单位。在使用这些单位时，我们需要注意单位的相对性和兼容性，避免出现兼容性问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6631e1add3423812e4f8c322