CSS外挂：Sass的那些装逼函数(function)_html/css_WEB-ITnose
1. 字符串函数
1.1 quote()
quote($string)给 $string前后添加引号。
//SCSS：p:after{ content: quote(hello +' '+ sass); //中间有空格(其他特殊符号)需要拼字符串；quote(hello sass); 直接这样会报错；}p:before{ content: quote('This\'s' + ' ' + 'bug'); //如果$string本身就带有引号，则会统一换成双引号`""`;}//编译为：p:after { content: "hello sass"; }p:before { content: "This's bug"; } 1.2 unquote()
unquote($string)删除 $string前后的引号。
//SCSS：p:after{ content: unquote("This's bug"); //中间的引号未被删除;}p:before{ content: unquote(Thissbug); //如$string本身就不带引号，则返回$string本身;}//编译为：p:after { content: This's bug; }p:before { content: sass; } 其实吧！这俩玩意在项目中我还真没用到过！
1.3 str-length()
str-length($string)返回 $string的长度。
//SCSS：p:before { content: str-length('hello sass!'); }//编译为：p:before { content: 11; } 1.4 to-upper-case()
to-upper-case($string)将 $string小写字母转成大写字母。
//SCSS：p:before { content: to-upper-case('hello sass!'); }//编译为：p:before { content: "HELLO SASS!"; } 1.5 to-lower-case()
to-lower-case($string)将 $string大写字母转成小写字母。
//SCSS：p:before { content: to-lower-case('HELLO SASS!'); }//编译为：p:before { content: "hello sass!"; } 2. 数字函数
2.1 percentage()
percentage($number)将一个不带单位的数值转成百分比。
//SCSS：.box{ width: percentage(.5)}.box2{ width: percentage(.1rem / .3rem)} 经测试，两个相同的单位，除了用除法 '/' 其他+-%均会报错，且用除法 '/' 也只能在两个相同类型的单位之间进行运算；*
//编译为：.box { width: 50%; }.box2 { width: 33.33333%; } 2.2 round()
round($number)将 $number四舍五入为整数， $number可带单位。
//SCSS：.xs-row{ width: round(33.33333333333333px)}//编译为：.xs-row { width: 33px; } 2.3 ceil()
ceil($number)大于 $number，向上取整。
//SCSS.fs14{ font-size: ceil(13.1px)}.fs16{ font-size: ceil(15.9px)}//编译为：.fs14 { font-size: 14px; }.fs16 { font-size: 16px; } 2.4 floor()
与 ceil()相反， floor($number)去除 $number小数，向下取整。
//SCSS：.fs14{ font-size: floor(14.1px) }.fs16{ font-size: floor(16.9px) }//编译为：.fs14 { font-size: 14px; }.fs16 { font-size: 16px; } 2.5 abs()
abs($number)，返回 $number的绝对值。
//SCSS：.fs16{ font-size: abs(-1.6rem) }.fs18{ font-size: abs(1.8rem) }//编译为：.fs16{ font-size: 1.6rem; }.fs18{ font-size: 1.8rem; } 2.6 min() max()
min($numbers…)，返回 $number...的最小值。
max($numbers…)，返回 $number...的最大值。
//SCSS：div{ width: min(2rem, 10rem) }div{ width: max(2rem, 10rem) }div{ width: max(2px, 10rem) } //非相同的单位，报错//编译为：div { width: 2rem; }div { width: 10rem; }Incompatible units: 'rem' and 'px' 2.7 random()
random([$limit])，返回一个随机数。
//SCSS：div { height: random(); //直接调用 width: random(666); //传个参}//编译为：div { height: 0.3649; width: 403;} 3. 列表函数
常用
3.1 length() nth()
length($list)，返回 $list的长度值；
nth($list, $n)，返回 $list中指定的某个 $n，且 $n必须是大于0的整数；
Javascript的Array()的索引是从0开始的，厄...有点扯远了，用过 css3的 :nth-child(n)都应该知道啦，索引下标也是从1开始的，So.....
//SCSS：$list: google, baidu, sogo;@for $i from 1 through length($list){ //取$list的length并循环输出； .icon-#{nth($list, $i)}{ //$list中的某个索引值； content: '#{nth($list, $i)}' }}//编译为：.icon-google { content: "google"; }.icon-baidu { content: "baidu"; }.icon-sogo { content: "sogo"; } 3.2 join()
join($list1, $list2, [$separator])将两个列表给连接在起来，组成一个列表；
$separator默认值是 auto，另外还有 comma和 space两个值，其中 comma值指定列表中的列表项值之间使用逗号 ,隔开， space值指定列表中的列表项值之间使用 空 格分隔。
join((blue, red), (#abc, #def), space) => blue red #abc #def //spacejoin(10px, 20px, comma) => 10px, 20px //comma
Examples:
//SCSS：$list1: google, baidu, sogo;$list2: facebook, instagram, twitter;$list3: join($list1, $list2); //讲真啦，很少用到join()，反正我是很少用到;@for $i from 1 through length($list3){ .icon-#{nth($list3, $i)}{ content: '#{nth($list3, $i)}' }}//编译为：.icon-google { content: "google"; }.icon-baidu { content: "baidu"; }.icon-sogo { content: "sogo"; }.icon-facebook { content: "facebook"; }.icon-instagram { content: "instagram"; }.icon-twitter { content: "twitter"; } 3.3 index()
index($list, $value)，返回 $list中的 $value所在的位置。
index(1px solid red, solid) => 2index(1px solid red, dashed) => nullindex((width: 10px, height: 20px), (height 20px)) => 2
3.4 list-separator()
list-separator($list)，返回 $list中的分隔符。
list-separator(1px 2px 3px) => spacelist-separator(1px, 2px, 3px) => commalist-separator('foo') => space 4. Introspection 函数
4.1 type-of()
type_of($value)返回 $value的类型。
type-of(abc) => stringtype-of("abc") => stringtype-of(true) => booltype-of(#fff) => colortype-of(green) => color 4.2 unit()
unit($number)返回 $number所使用的单位。
unit(100) => ""unit(100px) => "px"unit(3em) => "em"unit(10px * 5em) => "em*px"unit(10px * 5em / 30cm / 1rem) => "em*px/cm*rem"
4.3 unitless()
unitless($number)返回 $number是否带有单位；如果不带单位返回值为 true，带单位返回值为 false。
unitless(100) => trueunitless(100px) => false
5. Miscellaneous 函数
Miscellaneous函数称为三元条件函数，主要因为他和 JavaScript中的三元判断非常的相似。他有两个值，当条件成立返回一种值，当条件不成立时返回另一种值
if($condition, $if-true, $if-false)
当 $condition条件为真，则返回 $if-true值，否则返回 $if-false值。
if(true, 1px, 2px) => 1pxif(false, 1px, 2px) => 2px
6. 颜色函数
暂时还没用到过。
6.1 RGB函数()
rgb($red, $green, $blue)，根据 $red、 $green、 $blue三个值创建一个颜色；
rgba($red, $green, $blue, $alpha),将一个颜色根据透明度转换成 rgba 颜色。
rgba(#102030, 0.5) => rgba(16, 32, 48, 0.5)rgba(blue, 0.2) => rgba(0, 0, 255, 0.2)
7. Reference API
Sass::Script::Functions — Sass Documentation
结语：既然你都看到这里了，我就说说吧，这些个函数其实也就在自己写插件的时候有用，其他时候可能会有些大材小用。