上一篇介绍了一些有关sass语法的循环语句等。本篇将介绍sass的内置函数,也将是sass系列的最后一篇,旨在如何使用sass语法编写css。
1.内置函数api的介绍
内置函数: 1.字符串函数 unquote($string):删除字符串中的引号; quote($string):给字符串添加引号。 To-lower-case($string) To-upper-case($string) 2.数字函数 percentage($value):将一个不带单位的数转换成百分比值; round($value):将数值四舍五入,转换成一个最接近的整数; ceil($value):将大于自己的小数转换成下一位整数; floor($value):将一个数去除他的小数部分; abs($value):返回一个数的绝对值; min($numbers…):找出几个数值之间的最小值; max($numbers…):找出几个数值之间的最大值; random(): 获取随机数 3.列表函数 length($list):返回一个列表的长度值; nth($list, $n):返回一个列表中指定的某个标签值 join($list1, $list2, [$separator]):将两个列给连接在一起,变成一个列表; append($list1, $val, [$separator]):将某个值放在列表的最后; zip($lists…):将几个列表结合成一个多维的列表; index($list, $value):返回一个值在列表中的位置值。 4.Introspection函数 type-of($value):返回一个值的类型 unit($number):返回一个值的单位 unitless($number):判断一个值是否带有单位 comparable($number-1, $number-2):判断两个值是否可以做加、减和合并 5.Miscellaneous函数:Miscellaneous 函数称为三元条件函数,主要因为他和 JavaScript 中的三元判断非常的相似。 他有两个值,当条件成立返回一种值,当条件不成立时返回另一种值 模板:if($condition,$if-true,$if-false) 列:if(true,1px,2px) 结果:1px 6. Maps的函数 map-get($map,$key):根据给定的 key 值,返回 map 中相关的值。 map-merge($map1,$map2):将两个 map 合并成一个新的 map。 map-remove($map,$key):从 map 中删除一个 key,返回一个新 map。 map-keys($map):返回 map 中所有的 key。 map-values($map):返回 map 中所有的 value。 map-has-key($map,$key):根据给定的 key 值判断 map 是否有对应的 value 值,如果有返回 true,否则返回 false。 keywords($args):返回一个函数的参数,这个参数可以动态的设置 key 和 value。
2.Map函数的使用demo(主题颜色切换实战)
还是老套路,看编译后的css文件,相信大家都懂了
.box { width: 200px; height: 200px; background-color: #ff311f; color: #444; }
好了,至于其它的一些内置函数的使用我就不一一列举了,太简单了,只要明白那些内置函数所实现的功能,之后就比较傻瓜式的套用就可以了。那么有关于sass的使用,就到此为止了,有关写的不好的地方,可以评论建议,谢谢。