Sass/Scss　文字列に他の変数を挿入する方法

Scssで文字列の中に他の文字列を挿入する方法を詳しく解説します。

Scssで文字列の中に変数を挿入する方法を教えてください。

#{}を使って文字列の中に変数を挿入することができます。

受講者数No.1！初心者からプロへ導く信頼のスクール

短期間で習得可能！未経験から実践力を磨く充実のプログラム

テックアカデミー 公式ページへ ≫

今なら無料相談でAmazonギフトカードがもらえる！

#{}を使った文字列の挿入方法

　Scssで文字列に他の文字列を挿入する方法は、文字列内に「#{}」を使用することで、変数や式を埋め込むことができます。

例えば、以下のようなコードを考えます。

$color: #FF0000;
$text: "The color is #{$color}.";

　このコードでは、変数「$color」に「#FF0000」を代入し、文字列「The color is #{$color}.」を生成しています。「#{$color}」の部分は、「#FF0000」に置き換わり、最終的に「The color is #FF0000.」という文字列が生成されます。

サンプルプログラムを使ったScssでの文字列に他の文字列を挿入する方法の解説

　例として、リンクについての情報を表示するためのコードを考えてみます。この場合、背景色とフォント色を変数として定義し、文字列にそれらの値を挿入する必要があります。

$bg-color: #eee;
$font-color: #333;
a {
  content: "Click here for more information about #{$bg-color} background and #{$font-color} font color.";
}

　まずは変数を定義します。以下のように、$bg-colorと$font-colorという変数にそれぞれ背景色とフォント色の値を設定しています。

　次に、リンクについてのスタイルを設定します。以下のように、a要素のcontentプロパティに文字列を設定しています。

　このように、文字列の中に変数を挿入する場合は、#{}を使います。例えば、上記のコードでは、#{$bg-color}の部分には変数$bg-colorの値が、#{$font-color}の部分には変数$font-colorの値が挿入されます。

　このコードをコンパイルすると、以下のようなCSSが生成されます。

a {
  content: "Click here for more information about #eee background and #333 font color.";
}

このように、Scssでは文字列に他の文字列を挿入することができ、コードをスッキリと書くことができます。

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

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

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

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

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

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

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

まとめ

Scssで文字列の中に他の文字列を挿入する方法を詳しく解説しました。

　Scssで文字列に他の文字列を挿入する方法は、「#{}」を使って変数や式を埋め込むことで実現します。この方法を使うことで、動的な文字列を生成することが可能になります。

文字列の中に変数を挿入することができました！

Scssを使っている場合、文字列に他の文字列を挿入することはよくあることです。#{}をうまく使って、コードをスッキリとさせましょう。また、変数名をわかりやすくすることも大切です。