前言
在前端开发中，CSS 是不可或缺的一部分，而 SASS 又是 CSS 的一种扩展语言，它提供了许多便利的功能，可以让我们更加高效地编写 CSS。其中，单位和数值是 SASS 中最基础的要素，本文将详细介绍它们的使用技巧以及相关注意事项。
单位
在 CSS 中，我们通常使用像素（px）、百分比（%）等单位来定义长度、宽度等属性。而在 SASS 中，除了这些常见的单位外，还有一些特殊的单位，如 em、rem、vw、vh 等。下面分别介绍这些单位的使用方法和注意事项。
em
em 是相对单位，它的值相对于父元素的字体大小而定。例如，如果父元素的字体大小为 16px，那么 1em 就等于 16px。在 SASS 中，我们可以使用 em 函数来计算 em 值，如下所示：
---------- ------- -- --- ---------- ----
rem
rem 也是相对单位，但它是相对于根元素（即 html 元素）的字体大小而定。因此，它可以用来实现响应式布局。在 SASS 中，我们可以使用 rem 函数来计算 rem 值，如下所示：
---------- -------- -- --- ---------- -----
vw 和 vh
vw 和 vh 是相对单位，它们分别表示视口宽度和视口高度的百分比。例如，1vw 表示视口宽度的 1%。在 SASS 中，我们可以直接使用 vw 和 vh，如下所示：
------ ----- ------- -----
数值
在 CSS 中，我们通常使用数字来定义长度、宽度等属性。而在 SASS 中，除了数字外，还有一些特殊的数值，如 $、%、/ 等。下面分别介绍这些数值的使用方法和注意事项。
$
$ 是 SASS 中的变量符号，它用来定义变量。例如，我们可以定义一个颜色变量，如下所示：
--------------- --------
然后在其他地方使用这个变量，如下所示：
------ ---------------
%
% 是 SASS 中的占位符符号，它用来定义一个 CSS 规则，但不会生成任何 CSS 代码。例如，我们可以定义一个占位符，如下所示：
--------- -
---------
------- -
-------- ---
-------- ------
-
------- -
------ -----
-
-然后在其他地方继承这个占位符，如下所示：
---------- - ------- ---------- -
/
/ 是 SASS 中的除号符号，它用来进行数值计算。例如，我们可以计算一个宽高比，如下所示：
-------------- -- - -- ------ ---- ------- -------- - ------------------
总结
本文介绍了 SASS 中单位和数值的使用方法和注意事项，包括 em、rem、vw、vh、$、%、/ 等。掌握这些基础要素的使用技巧，可以让我们更加高效地编写 CSS，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65d2e280add4f0e0ffb26c83