Sass 数字函数

Posted 书和咖啡

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Sass 数字函数相关的知识,希望对你有一定的参考价值。

本节我们来看一下 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;
}

以上是关于Sass 数字函数的主要内容,如果未能解决你的问题,请参考以下文章

Sass学习笔记

Sass函数:数字函数-round()函数

scss SASS片段

scss Sass片段:响应视频

10个JavaScript代码片段,使你更加容易前端开发。

10个JavaScript代码片段,使你更加容易前端开发。