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