Sass 字符串函数
Sass 中定义了各种类型的函数,其中大部分函数我们可以通过 CSS 语句直接调用。下面是 Sass 中的函数分类:
- 字符串函数
- 数字函数
- 列表函数
- 映射函数
- 选择器函数
- Introspection函数
- 颜色值函数
本节我们先来学习字符串相关函数。
字符串函数有哪些
Sass 中的字符串函数用于处理字符串并获取相关信息。有一点需要注意,一般编程语言中字符串的索引都是从 0开始的,但是注意哟,Sass 中字符串的索引是从 1 开始的。
Sass 字符串函数如下所示:
函数 | 描述 |
---|---|
quote | 给字符串添加引号 |
unquote | 移除字符串的引号 |
str-length | 返回字符串的长度 |
str-index | 返回 substring 子字符串第一次在 string 中出现的位置。 |
str-insert | 在字符串 string 中指定索引位置插入内容 |
str-slice | 从字符串中截取子字符串,允许设置始末位置,未指定结束索引值则默认截取到字符串末尾 |
to-upper-case | 将字符串转成大写 |
to-lower-case | 将字符串转成小写 |
unique-id | 返回一个无引号的随机字符串作为 id |
quote函数
quote
函数主要用来给字符串添加引号,如果字符串本身就带有引号,则会默认变为双引号。
示例:
下面这个例子中,定义了两个变量,这两个变量的值都为字符串,其中一个没有带引号,一个带有单引号:
$str1: java;
$str2: 'python';
.func1{
content: quote($str1);
}
.func2{
content: quote($str2);
}
编译成 CSS 代码:
.func1 {
content: "java";
}
.func2 {
content: "python";
}
使用 quote()
函数给上述两个字符串添加引号后,不管原来的字符串是带有单引号还是不带引号,最终两个字符串输出后都默认带有双引号。
unquote函数
unquote
函数与 quote
函数功能相反,用于移除字符串所带的引号。
示例:
$str1: "hello,xkd";
.func1{
content: unquote($str1);
}
编译成 CSS 代码:
.func1 {
content: hello,xkd;
}
从输出的 CSS 代码可以看出,经过 unquote()
函数处理的字符串,所带的双引号会被移除。
str-length函数
str-length
函数用于返回字符串的长度。此函数
示例:
.func{
content: str-length("hello, xkd");
}
编译成 CSS 代码:
.func {
content: 10;
}
从输出的 CSS 代码可以看出,字符串 hello,xkd
的长度为 10,这里需要注意,空格也占一个长度。
str-index函数
str-index
函数用于返回 substring 子字符串第一次在 string 中出现的位置。其中 substring
和 string
都为函数参数。如果没有匹配到子字符串,则返回 null
。
示例:
.func{
content1: str-index(hello, o);
content2: str-index(abc, a);
content3: str-index(kiki, i);
}
编译成 CSS 代码:
.func {
content1: 5;
content2: 1;
content3: 2;
}
从上述代码中可以看出,当子字符串在字符串中出现多次时,例如 kiki
中 i
出现了两次,使用 str-index()
函数后会返回子字符串第一次出现时所在位置。
str-insert 函数
str-insert
函数用于在字符串 string
中指定索引位置插入内容。第一个参数为字符串,第二个参数为要插入的内容,第三个参数为要插入的位置。
示例:
例如要在 hello,
后面插入 xkd
:
.func {
content: str-insert("hello,", "xkd", 7);
}
编译成 CSS 代码:
.func {
content: "hello,xkd";
}
上述代码中,因为 "hello,"
字符串的长度为6,如果我们要在后面插入xkd
,就要在 7 的位置插入。
str-slice 函数
str-slice
函数用于从字符串中截取子字符串,允许设置开始和结束位置,当未指定结束索引值时,会默认截取到字符串末尾。
示例:
.func {
content: str-slice("abcdefg,", 1, 3);
}
编译成 CSS 代码:
.func {
content: "abc";
}
上述代码中,截取字符串中1到3之间的子字符串,1表示截取字符串的开始位置,3表示截取字符串结束位置。
to-upper-case/to-lower-case 函数
to-upper-case
函数用于将字符串转成大写,to-lower-case
函数用于将字符串转成小写。
示例:
$str:"Hello, XKD";
.func {
content1: to-upper-case($str);
content2: to-lower-case($str);
}
编译成 CSS 代码:
.func {
content1: "HELLO, XKD";
content2: "hello, xkd";
}
unique-id函数
unique-id
函数返回一个无引号的随机字符串作为 id。
示例:
.func {
content: unique-id();
}
编译成 CSS 代码:
.func {
content: uo50mf1eb;
}