Sass/SCSS　文字列の長さを取得する方法

Scssで文字列の長さを取得する方法について解説します。

Scssで文字列の長さを取得する方法を教えてください！

文字列の長さを取得するには、Scssの組み込み関数であるstr-lengthを使います。

str-length関数とは

　Scssには、文字列の操作に便利な組み込み関数が用意されています。
その中でも、文字列の長さを取得するstr-length()関数を利用します。

str-length関数を使用するためには、以下のように記述します。

$length: str-length('Hello, World!');

この例では、str-length()関数を使って文字列'Hello, World!'の長さを取得し、変数$lengthに格納しています。

文字列の中での日本語の扱いについて

　str-length()関数は、文字列の長さを取得するためには非常に便利な関数ですが、文字コードの違いによって扱いが異なります。日本語のような多字節文字列を扱う場合、文字列の長さが正しく取得できないことがあります。

その場合は、mb_strlen()関数を使用することができます。

$str: 'こんにちは、世界！';
$length: mb_strlen($str, 'UTF-8');

　この例では、mb_strlen()関数を使って、文字列'こんにちは、世界！'の長さを取得し、変数$lengthに格納しています。第2引数に'UTF-8'を指定していますが、使用する文字コードに合わせて変更してください。

str-lengthを利用したサンプルプログラム

　以下は、str-length()関数を利用したサンプルプログラムです。このプログラムでは、変数$strに格納された文字列の長さを取得して、その長さに応じて異なるスタイルを適用します。

$min-length: 10;
$max-length: 20;
$str: 'Hello, World!';
$length: str-length($str);

@if $length < $min-length {
  font-size: 12px;
} @else if $length > $max-length {
  font-size: 24px;
} @else {
  font-size: 18px;
}

　このプログラムでは、文字列'Hello, World!'の長さを取得して、$length変数に格納しています。次に、$length変数の値に応じて、@if、@else if、@elseを使って条件分岐を行っています。

　$length変数が$min-lengthより小さい場合は、font-sizeを12pxに設定します。$length変数が$max-lengthより大きい場合は、font-sizeを24pxに設定します。それ以外の場合は、font-sizeを18pxに設定します。

　このプログラムを実行すると、'Hello, World!'の長さが13文字であるため、font-sizeが18pxに設定されます。$min-lengthや$max-lengthを変更することで、異なる長さの文字列に対して異なるスタイルを適用することができます。

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

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

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

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

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

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

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

まとめ

Scssで文字列の長さを取得する方法について解説しました。

文字列の長さを取得することができました！

JavaScriptなどの別の言語で文字列の長さを取得することもできますが、CSSによる解決方法はブラウザの負荷を軽減するためにも好ましいです。