Sass 字符串函數

Sass 中定義了各類類型的函數，其中大部分函數咱們能夠經過 CSS 語句直接調用。下面是 Sass 中的函數分類：css

本節咱們先來學習字符串相關函數。java

Sass 中的字符串函數用於處理字符串並獲取相關信息。有一點須要注意，通常編程語言中字符串的索引都是從 0開始的，可是注意喲，Sass 中字符串的索引是從 1 開始的。python

Sass 字符串函數以下所示：編程

函數	描述
quote	給字符串添加引號
unquote	移除字符串的引號
str-length	返回字符串的長度
str-index	返回 substring 子字符串第一次在 string 中出現的位置。
str-insert	在字符串 string 中指定索引位置插入內容
str-slice	從字符串中截取子字符串，容許設置始末位置，未指定結束索引值則默認截取到字符串末尾
to-upper-case	將字符串轉成大寫
to-lower-case	將字符串轉成小寫
unique-id	返回一個無引號的隨機字符串做爲 id

quote 函數主要用來給字符串添加引號，若是字符串自己就帶有引號，則會默認變爲雙引號。segmentfault

下面這個例子中，定義了兩個變量，這兩個變量的值都爲字符串，其中一個沒有帶引號，一個帶有單引號：編程語言

$str1: java;
$str2: 'python'; 
.func1{
    content: quote($str1);
}
.func2{
    content: quote($str2);
}

編譯成 CSS 代碼：函數

.func1 {
  content: "java";
}
.func2 {
  content: "python";
}

使用 quote() 函數給上述兩個字符串添加引號後，無論原來的字符串是帶有單引號仍是不帶引號，最終兩個字符串輸出後都默認帶有雙引號。學習

unquote 函數與 quote 函數功能相反，用於移除字符串所帶的引號。url

$str1: "hello,xkd";
.func1{
    content: unquote($str1);
}

編譯成 CSS 代碼：.net

.func1 {
  content: hello,xkd;
}

從輸出的 CSS 代碼能夠看出，通過 unquote() 函數處理的字符串，所帶的雙引號會被移除。

str-length 函數用於返回字符串的長度。此函數

.func{
    content: str-length("hello, xkd");
}

編譯成 CSS 代碼：

.func {
  content: 10;
}

從輸出的 CSS 代碼能夠看出，字符串 hello,xkd 的長度爲 10，這裏須要注意，空格也佔一個長度。

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 函數用於在字符串 string 中指定索引位置插入內容。第一個參數爲字符串，第二個參數爲要插入的內容，第三個參數爲要插入的位置。

例如要在 hello, 後面插入 xkd：

.func {
    content: str-insert("hello,", "xkd", 7);
}

編譯成 CSS 代碼：

.func {
  content: "hello,xkd";
}

上述代碼中，由於 "hello," 字符串的長度爲6，若是咱們要在後面插入xkd，就要在 7 的位置插入。

str-slice 函數用於從字符串中截取子字符串，容許設置開始和結束位置，當未指定結束索引值時，會默認截取到字符串末尾。

.func {
    content: str-slice("abcdefg,", 1, 3);
}

編譯成 CSS 代碼：

.func {
  content: "abc";
}

上述代碼中，截取字符串中1到3之間的子字符串，1表示截取字符串的開始位置，3表示截取字符串結束位置。

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 函數返回一個無引號的隨機字符串做爲 id。

.func {
    content: unique-id();
}

編譯成 CSS 代碼：

.func {
  content: uo50mf1eb;
}