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