Sass function-string function, sass function string

Sass function-string function, sass function string

Sass Functions
In addition to variables that can be defined in Sass@ Extend,% PlaceholderAndMixinsIn addition to other features, it also provides a series of function functions. It mainly includes:
　● String functions

● Numeric Functions

● List Functions

● Color functions

● Introspection function

● Ternary Functions

Of course, in addition to our own function functions, we can also define function functions according to our own needs.Custom Functions.

 

 

 

String Functions
String functions are functions used to process strings. String functions of Sass mainly includeTwo Functions:

Unquote ($ string): removes quotation marks from a string. quote ($ string): adds quotation marks to a string.

1. unquote () function
The unquote () function is mainly usedDeleteOneQuotation marks in the stringIf this string does not existQuotation marks, SetReturns the original string..

 1 //SCSS 2 .test1 { 3     content: unquote('Hello Sass!') ; 4 } 5 .test2 { 6     content: unquote("'Hello Sass!"); 7 } 8 .test3 { 9     content: unquote("I'm Web Designer");10 }11 .test4 {12     content: unquote("'Hello Sass!'");13 }14 .test5 {15     content: unquote('"Hello Sass!"');16 }17 .test6 {18     content: unquote(Hello Sass);19 }

Compiled css code:

 1 //CSS 2 .test1 { 3     content: Hello Sass!;  4 } 5 .test2 { 6     content: 'Hello Sass!;  7 } 8 .test3 { 9     content: I'm Web Designer; 10 }11 .test4 {12     content: 'Hello Sass!'; 13 }14 .test5 {15     content: "Hello Sass!"; 16 }17 .test6 {18     content: Hello Sass; 19 }

Note:The unquote () function can only delete the most stringBeforeAndLastOfQuotation marks(Double quotation marks or single quotation marks), and the quotation marks in the middle of the string cannot be deleted. If the character is not enclosed in quotation marks, the return value is the string itself.

2. quote () function
The quote () function is opposite to the unquote () function. It is mainly used to enclose strings with quotation marks. If the character string contains quotation marks, it is replaced with double quotation marks."".
For example:

 1 //SCSS 2 .test1 { 3     content: quote('Hello Sass!'); 4 } 5 .test2 { 6     content: quote("Hello Sass!"); 7 } 8 .test3 { 9     content: quote(ImWebDesigner);10 }11 .test4 {12     content: quote(' ');13 }

Compiled css code:

 1 //CSS 2 .test1 { 3     content: "Hello Sass!"; 4 } 5 .test2 { 6     content: "Hello Sass!"; 7 } 8 .test3 { 9     content: "ImWebDesigner";10 }11 .test4 {12     content: "";13 }

When you use the quote () function, you can only add double quotation marks to the string. If the string contains single quotation marks or spaces, you must enclose them with single or double quotation marks. Otherwise, an error will be reported during compilation.

1. test1 {2 content: quote (Hello Sass); 3} 4 // in this way, the compiler will immediately report an error: error style. scss (Line 13: $ string: ("Hello" "Sass") is not a string for 'quote ')

The solution is to remove spaces or add quotation marks:

1 .test1 {2     content: quote(HelloSass);3 }4 .test1 {5     content: quote("Hello Sass");6 }

At the same time, quote () encounters special symbols, such:! ,? ,>And so on, except for the medium discount and the underscore _ bothDouble quotation marks are required.Otherwise, the compiler reports an error during compilation.

 

 

 

String functions-To-upper-case (), To-lower-case ()
1. To-upper-case ()
To-upper-case () functionConverts lowercase letters of a string to uppercase letters.. For example:

1 //SCSS2 .test {3     text: to-upper-case(aaaaa);4     text: to-upper-case(aA-aAAA-aaa);5 }

Compiled css code:

1 //CSS2 .test {3     text: AAAAA;4     text: AA-AAAA-AAA;5 }

2. To-lower-case ()
The To-lower-case () function is exactly the same as the To-upper-case () function.Opposite, Returns the stringConvert to lowercase letters:

1 //SCSS2 .test {3     text: to-lower-case(AAAAA);4     text: to-lower-case(aA-aAAA-aaa);5 }

Compiled css code:

1 //CSS2 .test {3     text: aaaaa;4     text: aa-aaaa-aaa;5 }

 

 

 

 

 

Bytes