Sass 関数文字列 function_html/css_WEB-ITnose

Sass 関数紹介
Sass には、変数を定義できたり、@extend、%placeholder、 mixins などの機能があるだけでなく、一連の関数もあります。主に、
●文字列関数

●数値関数

●リスト関数

●カラー関数

●イントロスペクション関数

●T三進関数など

もちろん、独自の関数に加えて、独自のニーズに応じて関数を定義することもできます。これは、多くの場合、カスタム関数と呼ばれます。

文字列関数
文字列関数は、その名前が示すように、文字列を処理するために使用される関数です。 Sass の文字列関数には主に 2 つの関数があります:

unquote($string): 删除字符串中的引号；quote($string)：给字符串添加引号。

1. unquote() 関数
unquote() 関数は主に 文字列内の 引用符 を削除するために使用されます。引用符 がある場合、 は元の文字列 を返します。

 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 }

コンパイルされた CSS コード:

 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 }

注:

unquote() 関数は、文字列の先頭の 引用符 (二重引用符または一重引用符) のみを削除でき、削除できません。文字列の途中から引用します。文字が引用符で囲まれていない場合は、文字列自体が返されます。 2. quote() 関数 quote() 関数は、主に文字列に引用符を追加するために使用されます。文字列自体に引用符が含まれている場合は、二重引用符 ""

に置き換えられます。

例:

 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 }

コンパイルされた CSS コード:

 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 }

quote() 関数を使用して文字列に二重引用符を追加できるのは、文字列の途中に一重引用符またはスペースがある場合のみです。を引用符または二重引用符で囲む必要があります。そうしないと、コンパイル中にエラーが報告されます。

1 .test1 {2  content: quote(<strong>Hello Sass</strong>);3 }4 //这样使用，编译器马上会报错：error style.scss (Line 13: $string: ("Hello""Sass") is not a string for `quote')

解決策は、スペースを削除するか引用符を追加することです:

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

同時に、quote() は次のような特殊記号に遭遇します: !、?、>
、記号 - とアンダースコア _ の両方を二重引用符

で囲む必要があります。そうしないと、コンパイラはコンパイル時にエラーを報告します。 to-upper-case() 関数

文字列の小文字を大文字に変換します

。例:

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

コンパイルされた CSS コード:

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

2. To- lower-case()

To- lower-case() 関数は To-upper-case( とまったく同じです) ) 代わりに、文字列を小文字に変換します
:

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

コンパイルされたCSSコード:

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

◑