MENU
  1. ホーム
  2. CSS
  3. Sass
  4. インターポレーション(補完)

インターポレーション(補完)

Sass
2024.01.17

インターポレーションは、演算を避けたい値を補完して出力したい場合に使用します。

インターポレーション(補完)
記法

#{変数名}

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="cssのリンク先" />
    <title>インターポレーション(補完)</title>
  </head>

  <body>
    <p>box1</p>
    <div class="box2">box2</div>
    <div class="box3">box3</div>
    <div class="box4">box4</div>
  </body>
</html>

以下のcssとscssは同一デザイン記述になります

Sass
// セレクターを指定(タグ名)
$class-name: p;
#{$class-name} {
  background-color: #f4af2b;
}

// セレクターを指定(クラス名)
$selector: ".box2";
#{$selector} {
  background-color: #bfdd9e;
}

//　プロパティ名を指定
$props: background-color;
.box3 {
  #{$props}: #56c1db;
}

// 部分的に置き換え
$property: "background";
$color: #f4af2b;
.box4 {
  #{$property}-color: $color;
}
css
p {
  background-color: #f4af2b;
}

.box2 {
  background-color: #bfdd9e;
}

.box3 {
  background-color: #56c1db;
}

.box4 {
  background-color: #f4af2b;
}
出力結果

box1

box2
box3
box4
Sass