在Web开发中，REM单位是一种相对于根元素（html元素）的相对单位。当浏览器缩放时，REM单位可以自动调整大小，并且可以使得设计师更容易明确他们的意图。
SASS是一种CSS预处理器，它可以帮助前端开发人员编写更具有扩展性和复用性的CSS代码。在这篇文章中，我们将介绍如何在SASS中使用REM单位。
步骤1：设置根字体大小
REM单位基于根元素的字体大小。因此，我们需要在CSS中设置根元素的字体大小。在SASS中，我们可以使用以下代码设置根元素的字体大小：
$base-font-size: 16px; // Set the base font size
html {
font-size: $base-font-size; // Set the font size for html tag
}在这个例子里，我们设置了基础字体大小为16像素。随后，我们将该值设置给html元素的 font-size 属性。 这是因为html元素是整个文档的根元素，它的样式会自动被所有其他元素继承。
步骤2：使用REM单位来定义样式
在你的SASS代码中，你可以像这样使用REM单位：
.nav {
font-size: 1.2rem; // Set font size to 1.2 times the base font size
padding: 0.5rem 1rem; // Set padding to 0.5 times the base font size on the top and bottom, and 1 times the base font size on left and right
border: 1px solid #333; // Set border width to 1 pixel
margin-top: 2.5rem; // Set margin top value to 2.5 times the base font size
}在这个例子中，我们使用了 rem 单位来设置样式。例如，我们使用 1.2rem 作为字体大小。这由于我们的根元素字体大小为 16px 设置的，所以字体大小为 19.2px（ 16px*1.2 ）。该组件的 padding 为 0.5rem 1rem，这表示其上下内间距为 8px，左右内间距为 16px。
只需在SASS文件中设置变量并使用它们在你的样式中，你就可以使用REM单位达到更灵活而且易于维护的CSS。
步骤3：在Media Query中使用REM单位
在响应性设计中，Media Query是很重要的。在Media Query中，你同样可以使用 rem 单位，像这样：
@media screen and (min-width: 600px) {
.nav {
font-size: 1.5rem;
padding: 1rem 2rem;
margin: 3rem 0;
}
}在这个例子中，我们建立了一个Media Query，并为 .nav 类添加了新的样式。当视口宽度达到600像素或更大时，这些样式将使用。这里的 font-size、 padding 和 margin 都使用 rem 单位。记得，这个单位会自动相对于根元素（html）的字体大小进行缩放。
结论
在SASS中使用REM单位能够帮助我们更为轻松地设置响应式CSS。 我们讲过了使用SASS设置根字体大小、在样式中使用 rem 单位和在Media Query中使用 rem 单位。通过使用这项技术，我们能够编写出更具可读性而且灵活的CSS代码。
这里有一些可练习的SASS代码：
-- -------------------- ---- -------
---------------- -----
---- -
---------- ----------------
-
---- -
---------- -------
-------- ------ -----
------- --- ----- -----
----------- -------
------ ------ --- ----------- ------ -
---------- -------
-------- ---- -----
------- ---- --
-
-
-------- -
---------- ------
------- - -----
-------- -----
-- -
---------- -------
-------------- -------
----------- -------
-
- -
---------- -------
------------ ----
-------------- -----
-
- -
------ -----
---------------- -----
------- -
---------------- ----------
-
-
-以上三步骤是在SASS中使用REM单位的基本方法，希望能为你的前端项目带来一些帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f7dd01c5c563ced5af8309