数值函数是 Sass 中非常实用的一部分，它们可以让你对数字进行各种操作，如加、减、乘、除等。这些函数可以帮助你在样式表中更加灵活地处理数值。
加法和减法
Sass 提供了 + 和 - 运算符来执行基本的加法和减法操作。这两个运算符可以直接用于数值。
$base-width: 800px;
$margin: 20px;
.container {
width: $base-width + $margin * 2; // 计算后的宽度为 840px
}乘法和除法
除了加法和减法，Sass 还支持乘法和除法。你可以使用 * 和 / 来进行这些操作。
-- -------------------- ---- ------- ---------------- ----- -------------- ---- ---- - ---------- --------------- - -------------- -- --------- ---- - ---------- - -------- ------------ - --- -- ------- ----- -
数值范围函数
Sass 还提供了一些用于生成数值范围的函数，比如 range() 函数。
@for $i from 1 through 3 {
.item-#{$i} {
width: 100px * $i; // 依次计算出 100px, 200px, 300px
}
}数值比较函数
Sass 提供了一些函数来帮助你进行数值比较，比如 min(), max(), abs() 等。
-- -------------------- ---- ------- -------- ------ -------- ------ ---------- - ------ ------------ --------- -- ------- ----- - --------- ------ --------- ----- ---- - ------- -------------- -- ------- ---- -
转换函数
有时候你可能需要将一个数值从一种单位转换为另一种单位。Sass 提供了一些函数来实现这一功能。
$font-size: 16px;
body {
font-size: $font-size * 2; // 直接将 px 单位的值放大两倍
line-height: em($font-size * 2); // 将计算后的值转换为 em 单位
}颜色函数中的数值操作
颜色函数中也经常涉及到数值操作。例如，在调整颜色亮度时，你需要对颜色的各个组成部分进行数值操作。
-- -------------------- ---- ------- ------- -------- ------------ - ------ --------------- ----- -- -------- --- - ----------- - ------ -------------- ----- -- -------- --- -
通过使用这些数值函数，你可以在 Sass 中更高效地处理数值，从而创建出更加动态和可维护的样式表。希望这些示例能够帮助你更好地理解和应用 Sass 中的数值函数。