目录
- 内置函数
– 字符串函数
– 数字函数
– 列表函数
– 三元函数
– 颜色函数 - 自定义函数
内置函数
常用字符串函数
unquote($string)
:删除字符串中的引号,只能去一层
#main{
content:unquote("测'试'测测测试")
}
//编译后
#main {
content: 测'试'测测测试; }
quote($string)
给字符串添加引号
#main{
content:quote(测试测测测试)
}
//编译后
#main {
content: "测试测测测试";
}
quote函数增加只能给字符串增加双引号,而且字符串中间有单引号或空格时,需要用单引号括起来,否则报错
如
#main{
content: quote(hello word)
}
编译报错
解决办法:删除空格做给两个单词增加单引号
#main{
content: quote('hello word')
}
//编译后
#main {
content: "hello word"; }
数字函数
percentage($value)将一个不带单位的数字转为为百分比值
round()将数字四舍五入
ceil()向上取整
floor()向下取整
abs()返回绝对值
min()返回最小值
max()最大值
列表函数
length($list)
返回一个列表的长度值,参数之间空格分隔
length(10px)
// 1
length(10px 20px (border 1px solid) 2em)
//4
length(border 1px solid)
//3
nth(list,n)
返回一个列表中指定的某个标签值
nth(border 1px solid,1)
//border
nth((border 1px solid red) border-top 2px,2)
//border-top
join(list,list2,[$res])
将两个列标在一起变成一个列表。
content: join((10px 20px),(30px 40px));
//10px 20px 30px 40px
join只能合并两个列如需合并两个以上列需进行join嵌套
如和并3列
content: join(join((10px 20px),(30px 40px)),(50px,60px));
//10px 20px 30px 40px 50px 60px
join 最后一个个参数指定以什么分隔 comma:逗号 space:空格
append(list,val,[res])
将某个值条件到列表的最后, 第三个参数与join一样
content:append(red,(green,blue))
//red green blue
zip(lists......)
将几个列表结合生一个多维列表
content:zip(1px 2px 3px,solid dashed dotted,green blue red)
// content: 1px solid green, 2px dashed blue, 3px dotted red;
需要注意的是列数必须相等
index($list,$value)
返回一个值在列表中的位置,没有返回false
content:index((border 1px solid),solid)
//3
Introspection函数
type-of($value)
判断值类型
unit($num)
返回一个值的单位
unitless($num)
判断某个值是否带单位 没有返回true,有返回false
comparable($number,$number)
判断两个值是否可以做加,减和合并返回 true/false
miscellaneous函数(三元函数)
三元条件函数当条件成立返回一个值,不成立返回一个值
if(条件,为真返回值,为假返回值)
content:if(true,'red','blue')
//red
颜色函数
rgb(red,green,blue)
创建一个颜色
rgb(200,40,88)
//#c82858
rgba(,opciaty)创建颜色设置透明度
rgba(200,40,88,.5)
//rgba(200, 40, 88, 0.5)
red($color)从一个颜色获取其中红色值
green()同上
blue()同上
mix(color,color)两个颜色混合一起
自定义函数
Sass自定义函数语法格式
@function Name(arg...){
@return
}
@function fn($num){
@return $num*2
}
#main{
content :fn(45)
}
//编译后
#main {
content: 90; }