Sass学习（三）--函数

目录

• 内置函数
  – 字符串函数
  – 数字函数
  – 列表函数
  – 三元函数
  – 颜色函数
• 自定义函数

内置函数

常用字符串函数
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; }