SASS/SCSSでJavaScriptのように文字列の一部を取り出す方法

こんにちは。みみほくろです。

今回はJavaScriptでよく見る文字列の一部を取り出す方法をSCSS/SASSで行う方法をご紹介します。

私はSCSSを採用しているため、サンプルコードはSCSSの記法になります。
SASSを採用している方は変換してお使いください。

取り出しにはstr-slice関数を使用します。

str-slice("文字列", 開始位置, 終了位置);
// または
str-slice("文字列", 開始位置);

こんな感じに使います。

$str: "Hello World";

$hello: str-slice($str, 1 , 5);  // 1文字目から5文字目まで取り出し
.string1::before {
  content: "#{$hello}";
}

$hello: str-slice($str, 3);  // 3文字目から最後まで取り出し
.string2::before {
  content: "#{$hello}";
}

$hello: str-slice($str, -5);  // 最後から5文字目まで取り出し
.string3::before {
  content: "#{$hello}";
}

// コンパイルすると
.string1::before {
  content: "Hello";
}
.string2::before {
  content: "llo World";
}
.string3::before {
  content: "World";
}

このSCSS/SASSで文字列を取り出す方法ってどんな場面で使うの？と思うかもしれません。

この関数なかなか便利でして、疑似要素を使って色を可変できるSVGアイコンを表示するときにも使えます。

詳しい手順はこちらの記事をご覧ください。