Scss中的自定义函数
一、字符串函数
1、unquote($string): 删除字符串中的引号
2、quote($string): 给字符串添加引号
注：quote在使用时加上""会避免一些报错
3、To-upper-cas($string): 字符串小写字母转换为大写字母
4、To-lower-case($string): 字符串大写字母转换为小写字母
// scss
.test1 {
content: unquote(" 'hello world' ");
}
.test2 {
content: quote('hello world');
}
.test3 {
content: quote("hello world");
}
// css
.test1 { content: 'hello world'; }
.test2 { content: "hello world"; }
.test3 { content: "hello world"; }
二、数字函数
1、percentage($value): 将一个不带单位的数转换为百分比
2、round($value): 将数值四舍五入，转换为一个最接近的整数
3、ceil($value): 将大于自己的小数转换为下一位整数
4、floor($value): 将一个数去除他的小数部分
5、abs($value): 返回一个数的绝对值
6、min($numbers...): 找出几个数值之间的最小值
7、max($numbers...): 找出几个数值之间的最大值
8、random(): 获取随机数
三、列表函数
1、length($list): 返回一个列表的长度值
2、nth($list,$n): 返回一个列表中指定的某个标签值
3、join($list1, $list2, [$separator]): 将两个列表链接在一起，变成一个列表
$separator: auto/comma/space; comma表示列表项值之间使用逗号分隔，space表示列表项值之间使用空格分开
4、append($list,$val,[$separator]): 将某个值放在列表的最后
5、zip($lists...): 将几个列表结合成一个多维的列表
zip(1px 2px 3px,solid dashed dotted,green blue red)
6、index($list,$value): 返回一个值在列表中的位置值
四、introspection函数
1、type-of($value): 返回一个值的类型
2、unit($number): 返回一个值的单位
3、unitless($number): 判断一个值是否带有单位
4、comparable($number-1,$number-2): 判断两个值是否可以做加、减和合并
五、三元条件函数
if($condition,$if-true,$if-false)
if(true,1px,2px)
=> 1px
六、Map函数
$theme-color: (
default:(
background-color: #fff,
text-color: #444,
link-color: #39f
),
primary:(
background-color: #000,
text-color: #fff,
link-color: #93f
),
negative:(
background-color: #f36,
text-color: #fefefe,
link-color: #d4e
)
)
1、map-get($map,$key): 根据给定的key值，返回map中相关的值
2、map-merge($map1,$map2): 将两个map合并成一个新的map
3、map-remove($map,$key): 从map中删除一个key,返回一个新的map
4、map-keys($map): 返回map中所有的key
5、map-values($map): 返回map中所有的value
6、map-has-key($map,$key): 根据给定的key值判断map是否有对应的value值，如果有返回true，否则返回false
7、keywords($args): 返回函数的参数，这个参数可以动态的设置key和value
网友评论