在Web开发中，REM单位是一种相对于根元素（html元素）的相对单位。当浏览器缩放时，REM单位可以自动调整大小，并且可以使得设计师更容易明确他们的意图。
SASS是一种CSS预处理器，它可以帮助前端开发人员编写更具有扩展性和复用性的CSS代码。在这篇文章中，我们将介绍如何在SASS中使用REM单位。
步骤1：设置根字体大小
REM单位基于根元素的字体大小。因此，我们需要在CSS中设置根元素的字体大小。在SASS中，我们可以使用以下代码设置根元素的字体大小：
---------------- ----- -- --- --- ---- ---- ---- ---- - ---------- ---------------- -- --- --- ---- ---- --- ---- --- -
在这个例子里，我们设置了基础字体大小为16像素。随后，我们将该值设置给html元素的 font-size 属性。 这是因为html元素是整个文档的根元素，它的样式会自动被所有其他元素继承。
步骤2：使用REM单位来定义样式
在你的SASS代码中，你可以像这样使用REM单位：
---- - ---------- ------- -- --- ---- ---- -- --- ----- --- ---- ---- ---- -------- ------ ----- -- --- ------- -- --- ----- --- ---- ---- ---- -- --- --- --- ------- --- - ----- --- ---- ---- ---- -- ---- --- ----- ------- --- ----- ----- -- --- ------ ----- -- - ----- ----------- ------- -- --- ------ --- ----- -- --- ----- --- ---- ---- ---- -
在这个例子中，我们使用了 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 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