在 Sass 中，单位不仅是表示数值大小的一种方式，还可以影响到编译后的 CSS 代码的输出。如果你不了解 Sass 中单位的使用方法，可能会导致你的样式表出现问题。因此，正确理解和使用 Sass 中的单位非常重要。
像素（px）
像素是网页设计中最常用的单位，Sass 中也支持使用像素作为长度单位。例如：
------- ------ -------- - ------ ------- -
编译后的 CSS 代码为：
-------- - ------ ------ -
在 Sass 中，像素也可以作为计算单位，如下所示：
------- ------ --------- ----- -------- - ------ ------ - -- -------- -------- - -- -
编译后的 CSS 代码为：
-------- - ------ ------ -------- ----- -
百分比（%）
百分比是另一种常用的单位，在 Sass 中也支持使用百分比作为长度单位。例如：
------------- ------ ------------ ---- ------- - ------ ------------- - ------ - ------ ------------ -
编译后的 CSS 代码为：
------- - ------ ------ - ------ - ------ ---- -
角度（deg）
角度是表示旋转角度的单位。在 Sass 中，可以使用角度作为旋转角度的单位。例如：
------- ------ -------- - ---------- --------------- -
编译后的 CSS 代码为：
-------- - ---------- -------------- -
时间（s, ms）
时间作为单位，常常用于动画、过渡等效果的表示。在 Sass 中，可以使用秒（s）和毫秒（ms）作为时间单位。例如：
---------- --- -------- - ----------- --- ---------- -
编译后的 CSS 代码为：
-------- - ----------- --- --- -
em 和 rem
em 和 rem 是相对单位，相对于父级和根元素的字体大小。在 Sass 中，可以使用 em 和 rem 作为长度单位。例如：
---------- ----- ------------ ------ --------- ----- -------- - ---------- ---------- ------------ ------------ -------- --------- -
编译后的 CSS 代码为：
-------- - ---------- ----- ------------ ----- -- -- - --- -- -------- ----- -
推荐使用 rem 作为长度单位，以便于实现响应式设计。
总结
正确使用单位对于 Sass 中的样式表起到至关重要的作用。在使用 Sass 时，要仔细思考每个单位的使用方式，以便于编译后的 CSS 代码实现预期的效果。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/647899f0968c7c53b04cd84d