在 Sass 中，数字（Numbers） 是最基础且灵活的数据类型，支持整数、小数、带单位或不带单位的值，以及多种内置函数（方法）用于数学运算、单位转换和其他数值操作。以下是 Sass 数字类型的详细介绍及示例：

一、简介

1、数字的基本形式

• 整数：0, 42, -10
• 小数：3.14, 0.5, -2.718
• 带单位：16px, 2rem, 1.5cm, 50%, 10deg

2、基础数学运算

Sass 支持标准的数学运算符：

$result: 10px + 20px; // 30px
$result: 50% - 10%; // 40%
$result: 2 * 3em; // 6em
$result: (20px / 2); // 10px（需用括号避免除法歧义）
$result: 10 % 3; // 1

二、常用函数

1、单位转换函数

1、percentage($number)

将小数转换为百分比：

percentage(0.5)  // 50%

2、unit($number)

获取数字的单位：

unit(10px)       // "px"
unit(5)          // ""

3、unitless($number)

判断数字是否无单位：

unitless(42)     // true
unitless(20px)   // false

4、comparable($num1, $num2)

判断两个数字是否可比较（单位兼容）：

comparable(10px, 2em)  // false
comparable(1cm, 10mm)  // true（1cm = 10mm）

2、数学函数

1、abs($number)

返回绝对值：

abs(-15)    // 15
abs(3.14)   // 3.14

2、round($number)

四舍五入取整：

round(4.3)   // 4
round(4.7)   // 5

3、ceil($number)

向上取整：

ceil(4.1)   // 5
ceil(4.9)   // 5

4、floor($number)

向下取整：

floor(4.9)  // 4
floor(4.1)  // 4

5、min($numbers...) / max($numbers...)

取最小/最大值：

min(10px, 20px, 5px)  // 5px
max(1, 2, 3)          // 3

6、random() / random($limit)

生成随机数：

random()      // 0~1 的随机小数（如 0.456）
random(100)   // 1~100 的随机整数

3、单位操作

1、单位运算规则

Sass 自动处理单位兼容的运算：

10px + 20px        // 30px
1in + 72pt         // 2in（1in = 72pt）
10px * 2           // 20px
10px * 2px         // 20px*px（非法单位，会报错）

2、移除单位

通过数学运算强制移除单位：

$size: 16px;
$unitless: $size / ($size * 0 + 1); // 16（无单位）

三、高级示例

1、动态计算 rem 单位

$base-font-size: 16px;
@function px-to-rem($px) {
  @return ($px / $base-font-size) * 1rem;
}

px-to-rem(32px)  // 2rem

2、生成随机颜色

@function random-color() {
  @return rgb(random(255), random(255), random(255));
}

.random-color {
  background: random-color();
}

3、单位转换函数

// 将 px 转换为 rem
@function px-to-rem($px, $base: 16px) {
  @return math.div($px, $base) * 1rem;
}

.element {
  font-size: px-to-rem(24px); // 1.5rem
}

4、动态生成间距类

$spacings: 4, 8, 12, 16;
@each $space in $spacings {
  .mt-#{$space} {
    margin-top: #{$space}px;
  }
}

5、映射管理断点

$breakpoints: (
  "small": 480px,
  "medium": 768px,
  "large": 1024px,
);

@mixin respond-to($key) {
  @media (min-width: map-get($breakpoints, $key)) {
    @content;
  }
}

四、注意事项

1. 单位兼容性：运算时需确保单位可转换（如 px 和 cm 不可直接相加）。
2. 除法歧义：使用 (a / b) 或 math.div(a, b)（Sass 新语法）避免 / 被解析为 CSS 原生除法。
3. 数学函数限制：Sass 的数学函数不支持复数或超高精度计算。

掌握这些方法可以大幅提升样式表中数值处理的灵活性和效率！ 🧮

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24