SCSS　文字列関数の使い方まとめ

SCSSを使った文字列関数の基本的な使い方を解説します。

文字列関数の一覧とその使い方と解説

文字列関数で主に使う関数には以下のようなものがあります。

※この表に掲載されていない他の文字列関数も多数存在します。詳細な情報は、公式のSCSSドキュメントを参照してください。

以下では、これらの関数について詳しく解説します。

文字列から引用符を取り除く：unquote関数の使い方

unquote関数は、文字列から引用符を取り除くために使用されます。通常、引用符が必要な場合、例えばcontentプロパティを使用する場合には、文字列を引用符で囲みます。しかし、unquote関数を使用することで、引用符を含む文字列から引用符を取り除くことができます。

unquote関数は引数に文字列を1つ取ります。引用符が含まれた文字列を渡すと、unquote関数は引用符を取り除いた文字列を返します。引数が引用符を含まない文字列である場合、unquote関数は引数と同じ文字列を返します。

以下は、unquote関数を使用して引用符を取り除く例です。

$my-string: "Hello, world!";
.content::before {
  content: unquote($my-string);
}

上記の例では、$my-string変数に文字列"Hello, world!"が代入されています。contentプロパティを使用して$my-string変数の値を出力するために、unquote関数を使用して引用符を取り除いています。

.content::before {
  content: Hello, world!;
}

以上のように、unquote関数を使用することで、引用符を取り除いた文字列を簡単に生成できます。

文字列に引用符を付ける：quote関数の使い方

quote関数は、引用符を含まない文字列を引用符で囲むために使用されます。通常、contentプロパティを使用する場合、文字列を引用符で囲む必要があります。しかし、変数を使用して文字列を出力する場合、引用符を含む文字列を使用する必要があります。そのため、quote関数を使用して引用符を含まない文字列を引用符で囲むことができます。

quote関数は引数に文字列を1つ取ります。引用符を含まない文字列を渡すと、quote関数は引用符で囲まれた文字列を返します。引数がすでに引用符を含む文字列である場合、quote関数は引数と同じ文字列を返します。

以下は、quote関数を使用して引用符を付ける例です。

$my-string: Hello, world!;
.content::before {
  content: quote($my-string);
}

上記の例では、$my-string変数に文字列Hello, world!が代入されています。contentプロパティを使用して$my-string変数の値を出力するために、quote関数を使用して引用符を付けています。

.content::before {
  content: "Hello, world!";
}

以上のように、quote関数を使用することで、引用符を含まない文字列を引用符で囲んだ文字列を簡単に生成できます。

文字列の長さを返す：str-length関数の使い方

str-length関数は、文字列の長さを返すために使用されます。引数に文字列を1つ取り、その文字列の長さを返します。str-length関数は、引用符で囲まれた文字列だけでなく、変数やプロパティの値などの文字列も扱うことができます。

以下は、str-length関数を使用して文字列の長さを取得する例です。

$my-string: "Hello, world!";
$length: str-length($my-string);

上記の例では、$my-string変数に文字列Hello, world!が代入されています。str-length関数を使用して、$my-string変数の文字列の長さを取得し、$length変数に代入しています。この場合、$length変数には、13が代入されます。

以下は、変数ではなく直接文字列を使用してstr-length関数を呼び出す例です。

$length: str-length("Hello, world!");

上記の例でも、文字列Hello, world!の長さを取得して、$length変数に代入しています。

str-length関数は、文字列の長さを調べる必要がある場合に便利です。たとえば、文字列が特定の長さよりも長い場合にスタイルを変更するなどの場合に使用することができます。

指定された位置に文字列を挿入する：str-insert関数の使い方

str-insert関数は、文字列の指定した位置に新しい文字列を挿入するために使用されます。引数には、元の文字列、挿入する文字列、および挿入する位置の3つを取ります。文字列は、引用符で囲まれた文字列や変数、プロパティの値など、文字列として扱えるすべての値が使用できます。

以下は、str-insert関数を使用して、文字列の指定した位置に新しい文字列を挿入する例です。

$original-string: "Hello, world!";
$new-string: str-insert($original-string, "beautiful ", 6);

上記の例では、$original-string変数に文字列Hello, world!が代入されています。str-insert関数を使用して、$original-string変数に新しい文字列を挿入し、その結果を$new-string変数に代入しています。

この場合、beautifulという文字列が、$original-stringの6番目の位置に挿入されます。したがって、$new-string変数には、Hello, beautiful world!という文字列が代入されます。

文字列内で指定された文字列の最初の出現位置を返す：str-index関数の使い方

str-index関数は、指定された文字列が、指定された元の文字列の中で最初に現れる位置を返します。第1引数に検索する文字列、第2引数に元の文字列を指定します。

以下は、str-index関数を使用して文字列の位置を検索する例です。

$original-string: "Hello, world!";
$index: str-index($original-string, "world");

上記の例では、$original-string変数に文字列Hello, world!が代入されています。str-index関数を使用して、文字列worldが$original-stringのどこに現れるかを確認し、その結果を$index変数に代入しています。この場合、worldは$original-stringの7番目の位置に現れるため、$index変数には、7という数値が代入されます。

文字列を大文字に変換する：to-upper-case関数の使い方

to-upper-case関数は、指定された文字列のすべての小文字を大文字に変換した結果を返します。引数として変換する文字列を指定します。

以下は、to-upper-case関数を使用して文字列を大文字に変換する例です。

$original-string: "Hello, world!";
$upper-case: to-upper-case($original-string);

上記の例では、$original-string変数に文字列Hello, world!が代入されています。to-upper-case関数を使用して、$original-string変数に格納されている文字列を大文字に変換し、その結果を$upper-case変数に代入しています。この場合、$upper-case変数には、HELLO, WORLD!という文字列が代入されます。

to-upper-case関数は、文字列を大文字に変換する場合に便利です。たとえば、大文字小文字を区別しない検索を実行する場合、入力された文字列を強制的に大文字に変換することができます。

文字列を小文字に変換する：to-lower-case関数の使い方

to-lower-case関数は、指定された文字列のすべての大文字を小文字に変換した結果を返します。引数として変換する文字列を指定します。

以下は、to-lower-case関数を使用して文字列を小文字に変換する例です。

$original-string: "Hello, world!";
$lower-case: to-lower-case($original-string);

上記の例では、$original-string変数に文字列Hello, world!が代入されています。to-lower-case関数を使用して、$original-string変数に格納されている文字列を小文字に変換し、その結果を$lower-case変数に代入しています。この場合、$lower-case変数には、hello, world!という文字列が代入されます。

to-lower-case関数は、文字列を小文字に変換する場合に便利です。たとえば、大文字小文字を区別しない検索を実行する場合、入力された文字列を強制的に小文字に変換することができます。

数値をパーセンテージに変換する：percentage関数の使い方

percentage関数は、指定された数値をパーセント表記に変換します。引数として変換する数値を指定します。

以下は、percentage関数を使用して数値をパーセント表記に変換する例です。

$original-value: 0.75;
$percentage-value: percentage($original-value);

上記の例では、$original-value変数に数値0.75が代入されています。percentage関数を使用して、$original-value変数に格納されている数値をパーセント表記に変換し、その結果を$percentage-value変数に代入しています。この場合、$percentage-value変数には、75%という文字列が代入されます。

percentage関数は、数値をパーセント表記に変換する場合に便利です。たとえば、ボタンの幅や高さをパーセントで指定する場合、数値をパーセント表記に変換して指定することができます。

リスキリングでキャリアアップしてみませんか？

リスキリング(学び直し)は、経済産業省が推奨しており、

今だけ、最大７０％のキャッシュバックを受けることができます。

最大70％の給付金が出るおすすめのプログラミングスクール！

リスキリングで給付金が出るスクールを７つ紹介 ≫

国策で予算が決められているため申し込みが多い場合は早期に終了する可能性があります！

興味のある方はすぐに確認しましょう。

まとめ

以上、SCSSの文字列関数について解説してきました。文字列関数を上手に活用することで、SCSSのコーディングをよりスマートかつ効率的に行うことができます。

SCSSの文字列関数には、様々な便利な関数があります。例えば、文字列の中から特定の文字列を抽出したり、大文字・小文字に変換したり、パーセント表記に変換することができます。このような文字列関数を上手に使いこなして、効率的かつ美しいコードを書くことができるようになりましょう。