Sass 数字函数

Posted 2021-06-26 书和咖啡

本节我们来看一下 Sass 中的数字函数，就像字符串函数主要用于字符串，Sass 中的数字函数主要用于处理数值。

常用的数字函数：

函数	描述
abs()	返回一个数值的绝对值
ceil()	向上取整
floor()	向下取整
comparable()	返回一个布尔值，判断两个参数是否可以比较
max()	返回最大值
min()	返回最小值
percentage()	将数字转化为百分比的表达形式
random()	返回 0-1 区间内的小数
round()	返回最接近该数的一个整数，四舍五入

abs()函数

abs() 函数用于返回一个数值的绝对值，这个其实很好理解，数学里面我们也有学过绝对值，我们来看一下这个函数的使用。

示例：

.func {
    font-size: abs(-14px);
    padding: abs(10px);
}

编译成 CSS 代码：

.func {
  font-size: 14px;
  padding: 10px;
}

ceil()函数

ceil() 函数用于小数的向上取整，不用遵循四舍五入，例如 3.1 向上取整为 4。

示例：

.func {
    width: ceil(10.1px);
    height: ceil(10.9px);
}

编译成 CSS 代码：

.func {
  width: 11px;
  height: 11px;
}

floor()函数

floor() 函数的使用和 ceil() 函数差不多，但是 floor() 是用于向下取整。

示例：

.func {
    width: floor(5.1px);
    height:floor(5.9px);
}

编译成 CSS 代码：

.func {
  width: 5px;
  height: 5px;
}

comparable()函数

comparable() 函数判断两个参数是否可以进行比较，结果返回一个布尔值，如果可以进行比较则返回 true，否则返回 false。

示例：

.func {
    content1: comparable(10px, 20px);
    content2: comparable(10px, 20em);
    content3: comparable(10px, 20);
}

编译成 CSS 代码：

.func {
  content1: true;
  content2: false;
  content3: true;
}

从编译后的 CSS 代码可以看出，不同单位的数值是不可以进行比较的，会返回 false。

max()/min()函数

max() 函数用于返回最大值，min() 函数用于返回最小值。

示例：

.max{
    content: max(1, 2, 10, 21, -19);
  }
.min{
    content: min(1, 2, 10, 21, -19);
}

编译成 CSS 代码：

.max{
  content: -19;
}
.min{
  content: 21;
}

percentage() 函数

percentage() 函数用于将数字转化为百分比的表达形式。

示例：

.num{
    per1: percentage(28);
    per2: percentage(0.1);
}

编译成 CSS 代码：

.num {
  per1: 2800%;
  per2: 10%;
}

random() 函数

random() 函数用于返回 0到1 区间内的小数 。当函数中带有一个参数 number 时，返回 1 至 number 之间的整数，包括 1 和 limit。

示例：

例如获取 0 到 1 之间的五个随机数，可以使用 Sass 中的循环语句来实现：

@for $i from 1 through 5{
    .num#{$i} {
        width: random();
    }
}

编译成 CSS 代码：

.num1 {
  width: 0.9782531648;
}

.num2 {
  width: 0.7659667301;
}

.num3 {
  width: 0.5846525783;
}

.num4 {
  width: 0.954587481;
}

.num5 {
  width: 0.7133921463;
}

如果我们想获取某个范围内的随机整数，可以在 random() 函数中指定一个参数。

示例：

例如生成1到10之间的一个随机数：

.num{
    width: random(10);
}

编译后的 CSS 代码：

.num {
  width: 7;
}

可以看到在编译后的 CSS 代码中，生成的随机数为 7。如果我们再次执行编译命令，则又会重新生成一个随机数。

round()函数

round() 函数用于返回最接近该数的一个整数，四舍五入。这个函数也是用于小数的取整，但是和 ceil() 函数不同，它遵循四舍五入。四舍五入我们小时候在数学中就学过啦，大家应该都知道。

示例：

.num{
    width: round(10.4px);
    height: round(39.6px);
}

编译后的 CSS 代码：

.num {
  width: 10px;
  height: 40px;
}