【Sass/SCSS】我花了4个小时整理了Sass的函数。学习经验总结，如有侵权请联系我删除，谢谢！说明Sass定义了各种类型的函数，可以通过CSS语句直接调用。可见Sass的功能是相当丰富的。整理了Sass的主要功能，重点放在后面的颜色功能上，设计的很银杏！String(string)函数quote(string)向字符串添加引号quote(hello)//"hello"unquote(string)从字符串中删除引号unquote("hello")//hellostr-index(string,substring)返回子字符串在字符串中第一次出现的位置。如果没有匹配的子字符串，则返回null。区分大小写。str-index(abcd,a)//1str-index(abcd,ab)//1str-index(abcd,X)//nullstr-insert(string,insert,index)字符串中的索引位置stringinsertinsert.str-insert("Helloworld!","xiaoming",6)//"Helloxiaomingworld!"str-length(string)返回字符串的长度。str-length("hello")//5str-slice(string,start,end)从string中截取一个子串，通过start-at和end-at设置起始和结束位置，如果结束索引则默认截取字符值未指定为字符串结尾。是不是感觉co-js的操作有点类似。str-slice("abcd",2,3)=>"bc"str-slice("abcd",2)=>"bcd"str-slice("abcd",-3,-2)=>"bc"str-slice("abcd",2,-2)=>"bc"to-lower-case(string)将字符串转换为小写to-lower-case("HELLO")//"hello"to-upper-case(string)将字符串转换为大写to-upper-case("hello")//"HELLO"unique-id()返回一个不带引号的随机字符串作为id。但是，它只能保证这个id在单次Sass编译中的唯一性。unique-id()//3a153b3ds数字函数abs(number)返回数字的绝对值。abs(13)//13abs(-13)//13comparable(num1,num2)返回一个布尔值，判断num1和num2是否可以比较。注意，是否可以比较并不是比较的结果。comparable(15px,10px)//truecomparable(20mm,1cm)//truecomparable(35px,2em)//falseceil(number)四舍五入。ceil(13.24)//14floor(number)向下舍入。floor(15.84)//15max(number...)返回最大值。max(5,7,9,0,-3,-7)//9min(number...)返回最小值。min(7,2,0,-2,-7)//-7percentage(number)将数字转换为百分比表达式。percentage(1.2)//120random()返回0-1范围内的小数。random()//0.2783random(number)返回一个介于1和number之间的整数，包括1和limit。random(10)//4round(number)返回最接近数字的整数，向上舍入。round(15.20)//15round(15.80)//16列表（List）函数三大注意点：1.Sass列表（List）函数用于处理列表，可以访问列表中的值，添加元素到列表，合并列表等。2.Sass列表是不可变的，所以在处理列表时，返回一个新的列表而不是修改原来的列表。3、列表的起始索引值为1，切记不能为0。append(list,value,[separator])将单个值value追加到列表末尾。separator为分隔符，默认自动检测，或指定为逗号或空格。append((abc),d)//abcdappend((abc),(d),comma)//a,b,c,dindex(list,value)返回列表中元素值的索引位置。index(abc,b)//2index(abc,f)//nullis-bracketed(list)判断列表中是否有括号is-bracketed([abc])//trueis-bracketed(abc)//falselist-separator(list)返回列表的分隔符类型。可以是空格或逗号。list-separator(abc)//"space"list-separator(a,b,c)//"comma"join(list1,list2,[separator,bracketed])合并两个列表并将list2添加到list1的末尾。separator为分隔符，默认自动检测，或指定为逗号或空格。bracked默认会自动检测是否有括号，可以设置为true或false。join(abc,def)//abcdefjoin((abc),(def),comma)//a,b,c,d,e,fjoin(abc,def,$bracketed:true)//[abcdef]length(list)返回列表的长度length(abc)//3set-nth(list,n,value)将列表中第n项的值设置为value。set-nth(abc,2,x)//axcnth(list,n)获取第n项的值。nth(abc,3)//czip(lists)将具有相同索引值的多个列表分组，形成一个新的多维列表。这个排列很人性化，需要安排！zip(1px2px3px,soliddasheddotted,redgreenblue)//1pxsolidred,2pxdashedgreen,3pxdottedblueMap(mapping)函数SassMap是不可变的，所以在处理Map对象时，返回的是一个新的Map对象，而不是修改原始Map对象。Map（映射）对象由一对或多对键/值表示。看！这个键/值不在这里吗？map-get(map,key)返回Map中key对应的值（value）。如果没有对应的键，则返回空值。$font-sizes:("small":12px,"normal":18px,"large":24px)map-get($font-sizes,"small")//12pxmap-has-key(map,key)判断如果map有对应的key，则返回true，否则返回false。$font-sizes:("small":12px,"normal":18px,"large":24px)map-has-key($font-sizes,"big")//falsemap-keys(map)返回地图A由所有键组成的队列。$font-sizes:("small":12px,"normal":18px,"large":24px)map-keys($font-sizes)//"small","normal","large"map-values(map)返回map中的所有值并生成一个队列。$font-sizes:("small":12px,"normal":18px,"large":24px)map-values($font-sizes)//12px,18px,24pxmap-merge(map1,map2)合并两个地图形成一个新的地图类型，即在map1的末尾添加map2$font-sizes:("small":12px,"normal":18px,"large":24px)$font-sizes2:("x-large":30px,"xx-large":36px)map-merge($font-sizes,$font-sizes2)//"small":12px,"normal":18px,"large":24px,"x-large":30px,"xx-large":36pxmap-remove(map,keys...)移除地图中的键，多个键之间用逗号分隔。$font-sizes:("small":12px,"normal":18px,"large":24px)map-remove($font-sizes,"small")//("normal":18px,"large":24px)map-remove($font-sizes,"small","large")//("normal":18px)selector函数算是一个高级操作，没看到其他高手怎么用.is-superselector(super,sub)比较两个选择器的匹配范围，即判断超级选择器是否包含子选择器的匹配范围，如果是则返回true，否则返回false。is-superselector("div","div.myInput")//trueis-superselector("div.myInput","div")//falseis-superselector("div","div")//trueselector-append(selectors)将第二个（或多个）添加到第一个选择器的后面。selector.selector-append("div",".myInput")//div.myInputselector-append(".warning","__a")结果：.warning__aselector-nest(selectors)返回一个新的选择器，该选择器从提供的列表选择器生成嵌套列表。selector-nest("ul","li")//ulliselector-nest(".warning","alert","div")//.warningdiv,alertdivselector-parse(selector)将字符串选择器选择器被转换成一个选择器队列。selector-parse("h1.myInput.warning")//('h1''.myInput''.warning')selector-replace(selector,original,replacement)给定一个选择器，用replacement替换original并返回一个新的选择器队列。selector-replace("p.warning","p","div")//div.warningselector-unify(selector1,selector2)将两组选择器组合成一个复合选择器。如果两个选择器不能组合，则返回空值。selector-unify("myInput",".disabled")//myInput.disabledselector-unify("p","h1")//nullsimple-selectors(selectors)将复合选择器拆分为单个选择器。simple-selectors("div.myInput")//div,.myInputsimple-selectors("div.myInput:before")//div,.myInput,:beforeColor函数（一）color的颜色设置和编辑alwaysthe前端设计的第一步。rgb(red,green,blue)创建红-绿-蓝(RGB)颜色。其中R是“red”代表红色，G是“green”代表绿色，B是“blue”代表蓝色。RGB(0,255,255);rgba(red,green,blue,alpha)根据红色、绿色、蓝色和alpha值创建颜色。rgba(0,255,255,0.3);hsl(hue,saturation,lightness)根据色调、饱和度和亮度的值创建颜色。hsl(120,100%,50%);//绿色hsl(120,100%,75%);//浅绿色hsl(120,100%,25%);//深绿色hsl(120,60%,70%);//柔和的绿色hsla(hue,saturation,lightness,alpha)根据色调、饱和度、亮度和alpha的值创建颜色。hsl(120,100%,50%,0.3);//绿色透明hsl(120,100%,75%,0.3);//lightgreenwithtransparencygrayscale(color)将一种颜色变成灰色，相当于desaturate(color,100%)。灰度（#7fffd4）；//#c6c6c6complement(color)返回补色，相当于adjust-hue($color,180deg)。补充（#7fffd4）；//#ff7faainvert(color,weight)返回一个反转颜色，红绿蓝值反转，但透明度不变。反转（白色）；//blackcolorfunction(2)Coloracquisition看下面的参数，你会发现这不是我常用的美颜设置，我很熟悉。red(color)从一种颜色中获取红色值（0-255），可用于获取某种十六进制颜色的红色值。红色（#7fffd4）；//127红色(红色);//255green(color)从颜色中获取绿色值(0-255)。绿色（#7fffd4）；//255绿色（蓝色）；//0blue(color)从颜色中获取蓝色值(0-255)。蓝色（#7fffd4）；//212蓝色（蓝色）；//255hue(color)返回颜色在HSL颜色值中的角度值(0deg-255deg)。色调（#7fffd4）；//160degsaturation(color)获取颜色的饱和度值(0%-100%)。饱和度（#7fffd4）；//100%lightness(color)获取颜色的亮度值(0%-100%)。亮度（#7fffd4）；//74.9%alpha(color)返回颜色的alpha，返回值为0或1。alpha(#7fffd4);//1opacity(color)获取颜色透明度值（0-1）。opacity(rgba(127,255,212,0.5);//0.5颜色函数(3)颜色操作mix(color1,color2,weight)混合两种颜色。权重参数必须是0%到100%。默认权重如果是50%，表示新颜色取color1和color2的颜色值的50%，如果权重是25%，表示新颜色是color1的25%和color2的75%的颜色值color2.adjust-hue(color,degrees)通过改变颜色的色相值创建一个新颜色(-360deg-360deg).adjust-hue(#7fffd4,80deg);//#8080ffrgba(color,alpha)根据红色、绿色、蓝色和透明度值创建颜色。rgba(#7fffd4,30%);//rgba(127,255,212,0.3)lighten(color,amount)通过改变颜色的亮度值（0%-100%）来使颜色变亮，并创建一个新的颜色。darken(color,amount)通过改变颜色的亮度值(0%-100%)创建一种新颜色，使颜色更暗。saturate(color,amount)增加传入颜色的颜色饱和度。相当于adjust-color(color,saturation:amount)desaturate(color,amount)降低一种颜色的饱和度后产生一个新的颜色值。同样，饱和度的取值范围为0%～100%。相当于adjust-color(color,saturation:-amount)opacify(color,amount)降低颜色的透明度，取值在0-1之间。相当于adjust-color(color,alpha:amount)fade-in(color,amount)降低颜色的透明度，取值在0-1之间。相当于adjust-color(color,alpha:amount)transparentize(color,amount)增加颜色的透明度，取值在0-1之间。相当于adjust-color(color,alpha:-amount)fade-out(color,amount)增加颜色的透明度，取值在0-1之间。相当于adjust-color(color,alpha:-amount)，总结函数那么多，想记住肯定是不可能的，只有在实际开发过程中才会用到，当然可以尽量用，对于scss函数的熟悉度会有比较明显的进步。总结一下，我用过很多，有的看过别人用过，有的没见过。我渐渐明白是怎么回事了。这或许就是本文的收获。感谢无所不能的网络和努力的自己，个人博客，GitHub测试，GitHub公众号-guizimo，小程序-小鬼博客
