SASS 是一种 CSS 预处理器，它引入了许多有用的功能，使得编写样式更加方便。其中，min() 和 max() 函数是非常有用的函数，它们可以用来比较多个值，并返回它们的最小值和最大值。在本文中，我们将学习如何在 SASS 中使用这两个函数，并给出一些例子来解析它们的应用。
1. min() 函数
min() 函数用于比较多个数中的最小值，并返回它。这个函数的语法如下：
min($n1, $n2, $n3, ...)
其中，$n1, $n2, $n3, ... 表示要比较的多个数。
下面是一个例子：
$width1: 100px; $width2: 200px; $width3: 300px; $max-width: min($width1, $width2, $width3);
在这个例子中，我们定义了三个变量，分别表示三个宽度值。然后，我们使用 min() 函数比较这三个值，并将结果赋值给另一个变量 $max-width。这个变量最终的值是 100px，因为 $width1 的值是最小的。
2. max() 函数
max() 函数用于比较多个数中的最大值，并返回它。这个函数的语法如下：
max($n1, $n2, $n3, ...)
其中，$n1, $n2, $n3, ... 表示要比较的多个数。
下面是一个例子：
$height1: 50px; $height2: 100px; $height3: 150px; $max-height: max($height1, $height2, $height3);
在这个例子中，我们定义了三个变量，分别表示三个高度值。然后，我们使用 max() 函数比较这三个值，并将结果赋值给另一个变量 $max-height。这个变量最终的值是 150px，因为 $height3 的值是最大的。
3. 实际应用
min() 和 max() 函数通常在响应式设计中使用，可以根据不同的屏幕尺寸设置不同的样式。下面是一个例子：
-- -------------------- ---- ------- -------------- ------ -------------- ------ ------------ ----- ------------ ----- ------------ ----- ------ ------ --- ----------- -------------- --- ----------- -------------- - ---------- ---------------- ------------ ------------- - ------ ------ --- ----------- -------------- - ---------- ---------------- ------------ ------------- -
在这个例子中，我们定义了两个断点（600px 和 800px），以及三个字体大小值，分别是 14px、16px 和 18px。在第一个媒体查询中（$breakpoint-1 和 $breakpoint-2 之间的屏幕），我们使用 min() 函数将这三个值比较，并将结果用于字体大小。这样，在较小的屏幕上，字体大小将是 14px。在第二个媒体查询中（大于 $breakpoint-2 的屏幕），我们使用 max() 函数将这三个值比较，并将结果用于字体大小。这样，在较大的屏幕上，字体大小将是 18px。
4. 总结
min() 和 max() 函数是非常有用的函数，可以用于比较多个值，并返回它们的最小值和最大值。在响应式设计中，可以根据不同的屏幕尺寸设置不同的样式。掌握这两个函数的用法，可以让我们的样式表更加简洁和易于维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cef190b5eee0b525679c13