首頁 > web前端 > html教學 > Sass函数数字函数_html/css_WEB-ITnose

Sass函数数字函数_html/css_WEB-ITnose

WBOY
發布: 2016-06-24 11:33:21
原創
1170 人瀏覽過

数字函数简介

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(<strong>1px,1em</strong>)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<br />
    登入後複製

     

    相關標籤:
    來源:php.cn
    本網站聲明
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
    熱門教學
    更多>
    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板