Sass string function

Sass defines various types of functions, most of which can be called directly through CSS statements. The following is the function classification in sass:

• String function
• Digital function
• List function
• Mapping function
• Selector function
• Introspection function
• Color value function

In this section, we will first learn about string related functions.

What are the string functions

The string function in sass is used to process strings and obtain relevant information. It should be noted that the index of strings in general programming languages starts from 0, but note that the index of strings in sass starts from 1.

The sass string function is as follows:

function	describe
quote	Add quotation marks to the string
unquote	Remove quotation marks from string
str-length	Returns the length of the string
str-index	Returns the first occurrence of a substring substring in a string.
str-insert	Inserts content at the specified index position in the string string
str-slice	The substring is intercepted from the string. The start and end positions are allowed to be set. If the end index value is not specified, it is intercepted to the end of the string by default
to-upper-case	Convert string to uppercase
to-lower-case	Convert string to lowercase
unique-id	Returns a random string without quotation marks as ID

Quote function

quoteThe function is mainly used to add quotation marks to a string. If the string itself contains quotation marks, it will be changed to double quotation marks by default.

Example:

In the following example, two variables are defined. The values of these two variables are strings, one without quotation marks and the other with single quotation marks:

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

Compile into CSS code:

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

usequote()After the function adds quotation marks to the above two strings, no matter whether the original string is with single quotation marks or without quotation marks, the final two strings are output with double quotation marks by default.

Unquote function

unquoteFunction andquoteThe function, in contrast, removes quotes from a string.

Example:

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

Compile into CSS code:

.func1 {
  content: hello,xkd;
}

From the output CSS code, we can see that afterunquote()Function, the double quotation marks will be removed.

STR length function

str-lengthFunction returns the length of a string. This function

Example:

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

Compile into CSS code:

.func {
  content: 10;
}

From the output CSS code, we can see that the stringhello,xkdThe length of is 10. It should be noted here that spaces also account for a length.

STR index function

str-indexThe substring() function returns the first occurrence of a substring substring in a string. amongsubstringandstring Are function parameters. If no substring matches, returnsnull。

Example:

.func{
    content1: str-index(hello, o);
    content2: str-index(abc, a);
    content3: str-index(kiki, i);
}

Compile into CSS code:

.func {
  content1: 5;
  content2: 1;
  content3: 2;
}

As can be seen from the above code, when the substring appears multiple times in the string, for examplekikiiniTwice, usestr-index()Function returns the first occurrence of the substring.

STR insert function

str-insert The function is used in a stringstringInserts content at the specified index location in. The first parameter is the string, the second parameter is the content to be inserted, and the third parameter is the position to be inserted.

Example:

For example, tohello,Insert afterxkd：

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

Compile into CSS code:

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

In the above code, because"hello,"The length of the string is 6, if we want to insert it laterxkd, you have to insert it at the position of 7.

STR slice function

str-slice The function is used to intercept a substring from a string. It allows you to set the start and end positions. When the end index value is not specified, it will be intercepted to the end of the string by default.

Example:

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

Compile into CSS code:

.func {
  content: "abc";
}

In the above code, the substring between 1 and 3 in the string is intercepted. 1 represents the start position of the intercepted string and 3 represents the end position of the intercepted string.

To upper case / to lower case function

to-upper-case The function converts a string to uppercase,to-lower-caseThe function converts a string to lowercase.

Example:

$str:"Hello, XKD";

.func {
    content1: to-upper-case($str);
    content2: to-lower-case($str);
}

Compile into CSS code:

.func {
  content1: "HELLO, XKD";
  content2: "hello, xkd";
}

Unique ID function

unique-idFunction returns a random string without quotation marks as ID.

Example:

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

Compile into CSS code:

.func {
  content: uo50mf1eb;
}

Link:https://www.9xkd.com/