Sass函数--数字函数

数字函数简介

Sass 中的数字函数提要针对数字方面提供一系列的函数功能:

  •       percentage($value):将一个不带单位的数转换成百分比值;
  •       round($value):将数值四舍五入,转换成一个最接近的整数;
  •       ceil($value):将大于自己的小数转换成下一位整数;
  •       floor($value):将一个数去除他的小数部分;
  •       abs($value):返回一个数的绝对值;
  •       min($numbers…):找出几个数值之间的最小值;
  •       max($numbers…):找出几个数值之间的最大值;
  •       random(): 获取随机数

 

 

数字函数-percentage()

 percentage()   函数主要是将一个不带单位的数字转换成百分比形式:

>> percentage(.2)
20%
>> percentage(2px / 10px)
20%
>> percentage(2em / 10em)
20%
1 .footer{
2     width:percentage(.2)
3 }

编译后的CSS:

1 .footer{
2     width:20%;
3 }

转换的值是一个带有单位的值,那么在编译的时候会报错误信息。

 

 

 

数字函数-round()函数

 round()  函数可以将一个数四舍五入为一个最接近的整数

>> round(12.3)
12
>> round(12.5)
13
>> round(1.49999)
1
>> round(2.0)
2
>> round(20%)
20%
>> round(2.2%)
2%
>> round(3.9em)
4em
>> round(2.3px)
2px
>> round(2px / 3px)
1
>> round(1px / 3px)
0
1 .footer{
2     width:round(12.3px);
3 }

编译后的CSS:

1 .footer{
2     width:12px;
3 }

在round() 函数中可以携带单位的任何数值。

 

 

 

数字函数-ceil()函数

  ceil()  函数将一个数转换成最接近于自己的整数会将一个大于自身的任何小数转换成大于本身1的整数。也就是只做入不会舍的计算

>> ceil(2.0)
2
>> ceil(2.1)
3
>> ceil(2.6)
3
>> ceil(2.3%)
3%
>> ceil(2.3px)
3px
>> ceil(2.5px)
3px
>> ceil(2px / 3px)
1
1 .footer {
2     width:ceil(12.3px);
3 }

编译后的CSS:

1 .footer{
2     width:13px;
3 }

 

 

 

 

数字函数-floor()函数

  floor()  函数刚好与  ceil()  函数功能相反,其主要将一个数去除其小数部分,并且不做任何的进位。也就是只做舍,不做入的计算

>> floor(2.1)
2
>> floor(2.5)
2
>> floor(3.5%)
3%
>> floor(10.2px)
10px
>> floor(10.8em)
10em
>> floor(2px / 10px)
0
1 .footer {
2     width:floor(12.3px);
3 }

编译后的CSS:

1 .footer{
2     width:12px;
3 }

 

 

 

数字函数-abs()函数

 abs()  函数会返回一个数的绝对值。

>> abs(10)
10
>> abs(-10)
10
>> abs(-10px)
10px
>> abs(-2em)
2em
>> abs(-.5%)
0.5%
>> abs(-1px / 2px)
0.5
1 .footer {
2     width:abs(-12.3px);
3 }

编译后的CSS:

1 .footer {
2     width: 12.3px;
3 }

 

 

 

数字函数-min()函数、max()函数
min()函数

  min()  函数功能主要是在多个数之中找到最小的一个,这个函数可以设置任意多个参数

>> min(1,2,1%,3,300%)
1%
>> min(1px,2,3px)
1px
>> min(1em,2em,6em)
1em

不过在  min()  函数中同时出现两种不同类型的单位,将会报错误信息:

>> min(1px,1em)
SyntaxError: Incompatible units: 'em' and 'px'.

max()函数

 max()  函数和  min()  函数一样,不同的是,  max()  函数用来获取一系列数中的最大那个值

>> max(1,5)
5
>> max(1px,5px)
5px

同样的,如果在 max() 函数中有不同单位,将会报错

>> max(1,3px,5%,6)
SyntaxError: Incompatible units: '%' and ‘px'.

 

 

 

数字函数-random()函数
  random()  函数是用来获取一个随机数

>> random()
0.03886
>> random()
0.66527
>> random()
0.8125
>> random()
0.26839
>> random()
0.85063

 

posted @ 2015-11-18 16:39  薯条_9  阅读(591)  评论(0编辑  收藏  举报