Sass学习之路(14)——数字函数

Sass中除了之前写到的用来处理字符串的字符串函数，还有关于数字处理的数字函数。（其实Sass中的数字函数和Js中的Math函数还是非常相似的）

1.percentage()

percentage()函数主要是用来将一个不带单位的数字转化成百分比（这样算弹性布局的时候应该很方便）。来看一个例子：

.footer{

    width : percentage(5px / 10px)
}

编译后：

.footer {

  width: 50%; }

这样还是可以方便很多的，不用再跑去浏览器控制台算百分比了。(注意：转换带有单位的值在编译时会报错)

2.round()函数

其实看名字也就大概可以猜到，这个函数可以将一个数四舍五入成一个整数。先看一个简单的例子：

.footer1 {

   width:round(15.8px);
   opacity:round(2px / 3px);
}

.footer2 {

   width:round(3.4em);
   height:round(2.2%);
}

编译后的CSS如下：

.footer1 {

  width: 16px;

  height: 1; }


.footer2 {

  width: 3em;

  height: 2%; }

可以看出，round()函数可以四舍五入带有任意单位或不带单位的值（不过如果在函数中写3px/2em这样的式子当然是无法四舍五入的，因为式子不符合Sass中运算的规则）；

3.ceil()函数、floor()函数

果然这两个函数写一起比较好，因为这是两个作用相反的函数。从字面上来看，其实很好理解，查查词典你会发现。ceil铺天花板的意思，而floor则有铺地板的含义。

所以打开一下脑洞，再实验一下，会发现：

ceil()函数用于将一个数字向上取整，相当于四舍五入的计算中只做入，不做舍的计算。例如：

.footer1 {

   width:ceil(18.1px);
}

.footer2 {

   width:ceil(2.8em);
}

编译结果如下：

.footer1 {

  width: 19px; }


.footer2 {

  width: 3em; }

可以看到无论小数点后边是否大于五，都做了五入的操作。

floor()函数很明显，自然是向下取整了。也比较好理解，例如：

.footer1 {

   width:floor(13.5px);
}

.footer2 {

   width:floor(8.8em);
}

可以看到，所有的情况都是做了舍去小数点后的部分的操作。

4.abs()函数

嘛，看到abs这个缩写，自然会想到absolute这个词。这个函数呢，是用来返回一个数的绝对值的。比较简单，看个例子就好：

.footer {

   width:abs(-8.9px);
}

编译后：

.footer {

  width: 8.9px; }

5.min()函数，max()函数

min()函数主要用于在多个数之中找到最小的一个，可以有非常多个参数。

max()函数则反过来，会在多个参数中，找到最大的一个。

tips:参数中不可以出现两种不同类型的单位，如px这样的绝对单位和em这样的相对单位，编译时会报错。

下面来看一个例子：

.footer{

height:min(6,50,10%,3,300%);

width:max(10px,23px);
}

编译后的CSS:

.footer {

  height: 3;

  width: 23px; }

还是很好理解的，我就不废话了。

5.random()函数

这个看字面也是可以看出来的，这是一个用来生成0~1之前的随机数的函数。所以每次编译得到的值都是不同的，而且通常都是零点几的样子。

那么如果我们想获得随机的某个范围内的整数，要怎么写呢。这里有一个比较通用的写法：

.random{
 z-index: floor(random()*5)+3;
 }

这里 的z-index会取到3~8之间的随机数整数。

其实如果使用过JS中的Math函数的极客们，对于这个应该很轻车熟路了。

好困，就写到这了。