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%
.footer{
width:percentage(.2)
}
编译后的CSS:
.footer{
width:20%;
}
转换的值是一个带有单位的值,那么在编译的时候会报错误信息。
数字函数-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
.footer{
width:round(12.3px);
}
编译后的CSS:
.footer{
width:12px;
}
在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
.footer {
width:ceil(12.3px);
}
编译后的CSS:
.footer{
width:13px;
}
数字函数-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
.footer {
width:floor(12.3px);
}
编译后的CSS:
.footer{
width:12px;
}
数字函数-abs()函数
abs() 函数会返回一个数的绝对值。
>> abs(10)
10
>> abs(-10)
10
>> abs(-10px)
10px
>> abs(-2em)
2em
>> abs(-.5%)
0.5%
>> abs(-1px / 2px)
0.5
.footer {
width:abs(-12.3px);
}
编译后的CSS:
.footer {
width: 12.3px;
}
数字函数-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
Sass函数--数字函数的更多相关文章
- Sass函数-数字函数-floor()函数
floor() 函数刚好与 ceil() 函数功能相反,其主要将一个数去除其小数部分,并且不做任何的进位.也就是只做舍,不做入的计算: >> floor(2.1) 2 >> f ...
- Sass函数:数字函数-round()函数
round() 函数可以将一个数四舍五入为一个最接近的整数: >> round(12.3) 12 >> round(12.5) 13 >> round(1.4999 ...
- Oracle之单行函数(字符串函数/数字函数/转换函数/日期函数/通用函数)
虚拟表DUAL介绍: dual是一张虚拟表,只有一行一列,用来构成select的语法规则. Oracle的查询中,必须使用"select 列- from 表"的完整语法,当查询单行 ...
- 2-2 Sass的函数功能-字符串与数字函数
Sass的函数简介 在 Sass 中除了可以定义变量,具有 @extend.%placeholder 和 mixins 等特性之外,还自备了一系列的函数功能.其主要包括: 字符串函数 数字函数 列表函 ...
- Sass函数:数字函数-min()函数、max()函数
min()函数 min() 函数功能主要是在多个数之中找到最小的一个,这个函数可以设置任意多个参数: >> min(1,2,1%,3,300%) 1% >> min(1px,2 ...
- Sass函数--字符串函数
Sass的函数简介在 Sass 中除了可以定义变量,具有 @extend.%placeholder 和 mixins 等特性之外,还自备了一系列的函数功能.其主要包括: ● 字符串函数 ● 数字函数 ...
- numtoyminterval函数——数字转换函数
numtoyminterval函数——数字转换函数 ----转至51CTO 水滴的博客 语法:NUMTOYMINTERVAL ( n , 'char_expr' ) c ...
- jQuery 判断是否为数字的方法 及 转换数字函数
<script language="javascript"> var t=$("#id").val();//这个就是我们要判断的值了 if(!isN ...
- Linux kernel ‘lbs_debugfs_write’函数数字错误漏洞
漏洞名称: Linux kernel ‘lbs_debugfs_write’函数数字错误漏洞 CNNVD编号: CNNVD-201311-421 发布时间: 2013-11-29 更新时间: 2013 ...
随机推荐
- 微信js-sdk,选择图片,上传,下载到本地,php服务端
//前端js代码<script> //客户端6.0.2 wx.config({ //debug:true, appId: "{pigcms:$signPackage.appId} ...
- django安装
见 http://jingyan.baidu.com/article/466506580e7d29f549e5f8b6.html 下载安装python下载解压django cmd进入django目录, ...
- 发布一款仿天猫产品放大镜JQuery插件
效果如下图: 1.原图 2.放大镜效果: 插件源码如下: /* * * JQUERY 简洁无极放大镜插件-zoomer * Author:盛世游侠 * QQ:418873053 * Date:2013 ...
- 纯css实现三角形
在设计界面的时候,通常需要三角形的图标,一般做法是用图片,其实也可以使用css来实现.如下: 向上的三角形 向右的三角形 向下的三角形 向左的三角形 实现它们的css分别是: .top ...
- javascript回调函数
function $$(f) { if (typeof f == 'function') {//f是一个函数 f(); } else { alert('not a function'); } } $$ ...
- Microsoft OLE DB Provider for SQL Server 错误 '80040e21'
我的是因为数据库满了,正在向服务商申请增加数据库容量 原文地址:Microsoft OLE DB Provider for SQL Server 错误 '800作者:欧阳IT记事本 昨天打开网站还正常 ...
- javascript 版的 SuperMario
注册博客园4年了,还没发表过一篇文章.明年就是超级马里奥这款游戏诞生30周年了,作为一个喜欢2d卷轴游戏的玩家,决定用js实现一个.目前只实现了基本玩法,得分什么的也还没做.项目的GitHub的地址是 ...
- c++ 高效文本读写
上数据结构课,做project,数据老师要求我们多做测试,而文本文件可以有效记录这些东东,这样我想起了文件的读写,下面是渣渣我个人的一些想法,大神们看见有错的,尽管指出(orz~~~囧,木有人看我的呀 ...
- atof
So given a string like "2.23" your function should return double 2.23. This might seem eas ...
- use "man rsyslogd" for details. To run rsyslog interactively, use "rsyslogd -n"to run it in debug mo
zjtest7-frontend:/root# service rsyslog start Starting system logger: usage: rsyslogd [options] use ...