热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

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

Sass中除了之前写到的用来处理字符串的字符串函数,还有关于数字处理的数字函数。(其实Sass中的数字函数和Js中的Math函数还是非常相似的)1.percentage()perce

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函数的极客们,对于这个应该很轻车熟路了。

好困,就写到这了。








推荐阅读
author-avatar
潙沵悈煙卻悈鋽孒沵
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有