SASSにおける文字列
この記事ではSASSにおける文字列について説明します。
SASSにおける文字列の基本的な操作から応用的な使い方まで、ステップバイステップで解説します。
YouTube Video
SASSにおける文字列
SASSはCSSを拡張するためのプリプロセッサであり、文字列はスタイル定義をより柔軟かつ動的にするために欠かせない要素の1つです。
文字列の基本
SASSにおける文字列は、シングルクォートとダブルクォートのどちらでも囲むことができ、場合によってはクォートを省略して識別子のように記述することも可能です。以下に基本的な記述例を示します。
1// Single quotes
2$single-quoted: 'Hello, World!';
3// Double quotes
4$double-quoted: "Hello, World!";
5// No quotes
6$unquoted: Hello-World;注意点
- クォート付きの文字列は、そのまま文字列リテラルとして評価されます。
- クォートなしの文字列は、クラス名やIDなどのCSS識別子として扱われるケースが多いため、使い分けに注意が必要です。
文字列の結合
SASSでは+演算子を使用して文字列を結合することができます。
1$greeting: "Hello";
2$name: "Alice";
3
4$result: $greeting + ", " + $name + "!"; // "Hello, Alice!"- このコードは、SASSで
+演算子を使って複数の文字列を結合し、新しい文字列を作成する例です。
応用例：クラス名の生成
1$base-class: "btn";
2$modifier: "primary";
3
4.class-name {
5 content: $base-class + "--" + $modifier; // "btn--primary"
6}- このコードは、SASSで
+演算子を使って基底クラス名と修飾子を結合し、新しいクラス名を生成する例です。
文字列関数の活用
SASSには、文字列のクォート制御や部分抽出など、多彩な操作を可能にする便利な組み込み関数が用意されています。
quote()とunquote()
quote()とunquote()関数によって、文字列にクォートを追加したり、削除したりすることができます。
1$quoted: quote(Hello); // '"Hello"'
2$unquoted: unquote("Hello"); // Hellostr-length($string)
str-length()関数は、文字列の長さを取得します。
1$length: str-length("Hello"); // 5str-insert($string, $insert, $index)
str-insert()関数は、指定した位置に文字列を挿入します。
1$result: str-insert("Hello", " SASS", 6); // "Hello SASS"str-slice($string, $start-at, [$end-at])
str-slice()関数は、文字列の一部を抽出します。
1$substring: str-slice("Hello, World!", 1, 5); // "Hello"to-upper-case()とto-lower-case()
to-upper-case()とto-lower-case()関数は、文字列を大文字または小文字に変換します。
1$upper: to-upper-case("sass"); // "SASS"
2$lower: to-lower-case("SASS"); // "sass"条件付きロジックでの文字列
SASSの@ifディレクティブを活用すれば、文字列の値に応じて条件分岐を行い、テーマや設定に合わせた柔軟なスタイルを切り替えることができます。
1$theme: "dark";
2
3@if $theme == "dark" {
4 body {
5 background-color: black;
6 color: white;
7 }
8} @else {
9 body {
10 background-color: white;
11 color: black;
12 }
13}- このコードは、SASSの
@ifディレクティブを使ってテーマがdarkかどうかを判定し、条件に応じてスタイルを切り替える例です。
実践例：ダイナミックな背景画像パスの生成
以下は、文字列操作を活用して背景画像のURLを生成する例です。
1$image-path: "/images/";
2$image-name: "background";
3$image-extension: ".jpg";
4
5.background {
6 background-image: url($image-path + $image-name + $image-extension);
7}コンパイル結果
1.background {
2 background-image: url("/images/background.jpg");
3}- このコードは、SASSで文字列を結合して背景画像のパスを動的に生成し、背景画像として適用する例です。
リストやマップとの組み合わせ
SASSのリストやマップを文字列操作と組み合わせることで、より柔軟なスタイルの生成が可能です。
リストの例
1$states: "hover", "focus", "active";
2
3@each $state in $states {
4 .btn-#{$state} {
5 content: "Button in " + $state + " state";
6 }
7}コンパイル結果
1.btn-hover {
2 content: "Button in hover state";
3}
4.btn-focus {
5 content: "Button in focus state";
6}
7.btn-active {
8 content: "Button in active state";
9}- このコードは、SASSの
@eachディレクティブを使ってリスト内の状態ごとにクラスを生成し、文字列を結合して動的に内容を設定する例です。
マップの例
1$colors: (
2 "primary": "#3498db",
3 "secondary": "#2ecc71"
4);
5
6@each $name, $color in $colors {
7 .text-#{$name} {
8 color: $color;
9 }
10}コンパイル結果
1.text-primary {
2 color: #3498db;
3}
4.text-secondary {
5 color: #2ecc71;
6}- このコードは、SASSのマップを使って色名と値を対応付け、
@eachディレクティブでそれぞれのクラスを動的に生成する例です。
文字列のエスケープ
特定の文字列をCSSの識別子として安全に使用するために、エスケープが必要になる場合があります。
1$special_character: "example\\@123";
2.#{$special_character} {
3 content: "This is a valid CSS class.";
4}コンパイル結果
1.example\@123 {
2 content: "This is a valid CSS class.";
3}- このコードは、SASSで特殊文字を含む文字列を変数として扱い、
#{$variable}で展開してCSSで有効なクラス名として使用する例です。
結論
SASSの文字列操作は、単なる文字列リテラルの記述にとどまらず、動的にスタイルを構築するための強力な仕組みです。ここで紹介した基本的な操作や関数を活用すれば、CSSの再利用性・保守性を高め、より効率的なスタイル設計が可能になります。
YouTubeチャンネルでは、Visual Studio Codeを用いて上記の記事を見ながら確認できます。 ぜひYouTubeチャンネルもご覧ください。