Sass中常用的函数
2016-07-27 15:28
218 查看
字符串函数
To-upper-case() 函数将字符串小写字母转换成大写字母To-lower-case() 函数 与 To-upper-case() 刚好相反,将字符串转换成小写字母
数字函数
Sass 中的数字函数提要针对数字方面提供一系列的函数功能:percentage($value):将一个不带单位的数转换成百分比值;
round($value):将数值四舍五入,转换成一个最接近的整数;
ceil($value):将大于自己的小数转换成下一位整数;
floor($value):将一个数去除他的小数部分;
abs($value):返回一个数的绝对值;
min($numbers…):找出几个数值之间的最小值;
max($numbers…):找出几个数值之间的最大值;
random(): 获取随机数
$value:0.8721; $value2:3.68; $value3:4.278; .test1{ width:percentage($value); } .test2{ width:round($value)+px; } .test3{ width:ceil($value); } .test4{ width:floor($value); } .test5{ width:abs($value); } .test6{ width:min($value,$value2,$value3); } .test7{ width:max($value,$value2,$value3); } .test8{ width:random(); }
编译后的css:
.test1 { width: 87.21%; } .test2 { width: 1px; } .test3 { width: 1; } .test4 { width: 0; } .test5 { width: 0.8721; } .test6 { width: 0.8721; } .test7 { width: 4.278; } .test8 { width: 0.43515; }
列表函数简介
列表函数主要包括一些对列表参数的函数使用,主要包括以下几种:length($list):返回一个列表的长度值; 个人认为可以理解js中数组的length;
nth($list, $n):返回一个列表中指定的某个标签值,不同于别的语言的是这个标签的值是从1开始的,而不是从0开始 个人认为可以理解js中数组的下标,只不过这个下标是从1开始 而不是从0开始;
join($list1, $list2, [$separator]):将两个列给连接在一起,变成一个列表;
append($list1, $val, [$separator]):将某个值放在列表的最后;
zip($lists…):将几个列表结合成一个多维的列表;
index($list, $value):返回一个值在列表中的位置值。
Introspection函数
Introspection 函数包括了几个判断型函数:type-of($value):返回一个值的类型
unit($number):返回一个值的单位
unitless($number):判断一个值是否带有单位
comparable($number-1, $number-2):判断两个值是否可以做加、减和合并
1、type-of() 函数主要用来判断一个值是属于什么类型:
返回值:
number 为数值型。
string 为字符串型。
bool 为布尔型。
color 为颜色型。
2、unit() 函数主要是用来获取一个值所使用的单位,碰到复杂的计算时,其能根据运算得到一个“多单位组合”的值,不过只充许乘、除运算:
但加、减碰到不同单位时,unit() 函数将会报错,除 px 与 cm、mm 运算之外
unit() 函数对于单位运算相对来说也没有规律,而且有些单位也无法整合成一个单位,对于我们在 CSS 中运用中并不适合
换句话说,上面运算出来的单位,对于在 CSS 中使用将是没有任何意义的。
3、unitless() 函数相对来说简单明了些,只是用来判断一个值是否带有单位,如果不带单位返回的值为 true,带单位返回的值为 false
具体例子,见如下代码清单。如下代码实现的功能:用户在调用混合宏时,如果用户没有给参数值加上单位,程序会自动加入单位。
//SCSS @mixin adjust-location($x, $y) { @if unitless($x) { $x: 1px * $x; } @if unitless($y) { $y: 1px * $y; } position: relative; left: $x; top: $y; } .botton{ @include adjust-location(20px, 30); } //编译后的css .botton { position: relative; left: 20px; top: 30px; }
4、comparable() 函数主要是用来判断两个数是否可以进行“加,减”以及“合并”。如果可以返回的值为 true,如果不可以返回的值是 false
Miscellaneous函数
在这里把 Miscellaneous 函数称为三元条件函数,主要因为他和 JavaScript 中的三元判断非常的相似。他有两个值,当条件成立返回一种值,当条件不成立时返回另一种值:if($condition,$if-true,$if-false)
上面表达式的意思是当 $condition 条件成立时,返回的值为 $if-true,否则返回的是 $if-false 值。
>> if(true,1px,2px) 1px >> if(false,1px,2px) 2px
相关文章推荐
- 华为在线练习(1)
- 【Android】使用Jenkins+Gradle+FTP,实现自动打包,自动上传文件至FTP
- poj2299 Ultra-QuickSort
- php的正则表达式
- poj2391(floyd+二分+网络流判定)
- POJ 2996 简单模拟
- 诸侯安置DP做法
- String类日期比较
- 安装virtualenv No module named virtualenv
- IOS 费时操作处理办法
- Qt Quick ToolTip
- java正则表达式
- 2016 Multi-University Training Contest3
- python virtualenv环境运行django
- 自学 iOS 开发的一些经验 - 转自无网不剩的博客
- UIVisualEffectView
- 【HEVC简介】CTU、CU、PU、TU结构
- mysql 从data文件恢复数据库
- 【leetcode Database】176. Second Highest Salary
- 多址技术与复用技术