10天精通Sass 之 处理字符串与数字的函数

Sass的函数简介

Sass中自备了一系列的功能函数，包括:
- 字符串函数
- 数字函数
- 列表函数
- 颜色函数
- Introspection函数
- 三元函数

除了Sass中已提供的函数，我们还可以根据自己的需求定义函数，称为自定义函数。

字符串函数

* unquote($string) * :删除字符串中的引号
* quote($string) * :给字符串加引号

unquote()函数
用来删除字符串的引号，如果这个字符串没有引号，则返回原始字符串。

.test1 { content: unquote("hello demo"); }

.test2 { content: unquote('"Hello Sass!"'); }

.test3 { content: unquote("hello demo" + "Hello Sass!"); }

编译后的CSS为:

.test1 { content: hello demo; }

.test2 { content: "Hello Sass!"; }

.test3 { content: hello demoHello Sass!; }

==注意：== unquote()函数能删除每个字符串最前和最后的引号(双引号或单引号)，无法删除字符串中间的引号。

* quote()函数 *
quote()函数与unquote()函数功能相反，用来给字符串添加引号，如果字符串自身带有引号，会统一换成双引号。

.test1 { content: quote('hello demo!'); }
.test2 { content: quote("hello demo"); }
.test3 { content: quote(ImWebDesigner); }
.test4 { content: quote(' '); }
.test5 { content: quote(hello + demo + yes); }

编译出来的CSS为:

.test1 { content: "hello demo!"; }

.test2 { content: "hello demo"; }

.test3 { content: "ImWebDesigner"; }

.test4 { content: " "; }

.test5 { content: "hellodemoyes"; }

需要注意的是:
quote()不能给中间有空格且没有用+号连接的字符串加引号，会报错。

另外，quote() 碰到特殊符号，比如： !、?、> 等，除中折号 - 和 下划线_ 都需要使用双引号括起，否则编译器在进行编译的时候同样会报错。

* to-upper-case() *

将字符串小写字母转换成大写字母

.test{ content: to-upper-case(hellodemo); }

编译出来的CSS为:

.test{ content: HELLODEMO; }

* to-lower-case() *

.test{ content: to-upper-case(HELLODEMO); }

编译出来的CSS为:

.test{ content: hellodemo; }

需要注意的是 字符串不能加引号，字符串中间不能含有空格，并且除中折号 - 和 下划线_ ，不能含有其他特殊符号，否则会报错

数字函数

percentage()将一个不带单位的数字转换成百分比形式
当使用百分比布局时：

@for $i from 1 through 5{
    .col-#{$i} {
        width: percentage($i/5)；
    }
}

编译出来的CSS为:

.col-1 { width: 20% ；; }

.col-2 { width: 40% ；; }

.col-3 { width: 60% ；; }

.col-4 { width: 80% ；; }

.col-5 { width: 100% ；; }

需要注意的是: percentage只能将数字变成百分制的表示方式。对于字符串或者带有单位的数字，使用percentage 会报错.

round():将数值进行四舍五入；

.span1{ width: round(12.3px); }
.span2{ width: round(13.5); }
.span3{ width: round(12.3abx); }

编译出来的结果为:

.span1 { width: 12px; }

.span2 { width: 14; }

.span3 { width: 12abx; }

round()函数处理数字时，允许数字带单位，但是这个单位究竟是什么字符，sass并不会检查。仅需要是以数字开头即可。如果以字符串开头，那么round()会报错。

ceil():向上取整；

.span1{ width: 12.3; }
.span2{ width: 21.8px; }

编译后的CSS为:

.span1 { width: 12.3; }

.span2 { width: 21.8px; }

类似的函数还要，floor()函数用于向下取整。
abs()，取绝对值。
参数同ceil()

max()和min()函数

max()返回最大值

min()返回最小值

只能比较相同类型单位，不能对比不同类型的单位。

.span1{ width: min(6,50,15,3,200%); }

.span2{ width: max(10in,23px); }

编译出来的CSS为:

.span1 { width: 3; }

.span2 { width: 10in; }

random()生成0-1之间的随机数

div{ width: random() * 20#{px}
}
span{ width: random() }

编译出来的CSS为:

div { width: 1.73254px; }

span { width: 0.85449; }

graph LR
A-->B