Sass の'interpolation'についての覚書 ～「これってアニメの中割じゃね？」～

要約

• デザインもﾁｮｯﾄ興味あるフロントエンドの人間が TypeScript×React 勉強中に「ついでだから Sass もやろう」と思い立ち勉強
• その途中でインターポレーションの概念について遭遇し、原義を調べたら「つまりアニメ制作における原画と原画の間の動画（中割）を自動で生成する感じ……ｯﾃｺﾄ!?」　※デザイナー向けの考え方
• 使い方：js/TS におけるテンプレートリテラル（${var}）ちっくに使える　※プログラマ向けの考え方
  • どちらも「文字列の中に変数を埋め込む」発想
  • 書き方のシンタックスも近い
  • 挙動の差
    • Sass：コンパイル時に静的展開
    • JS：実行時に***動的**展開

深堀

• interpolation（補間）＝「間を埋める」 が原義
• Sass では主に文字列の中に変数や式を埋め込む用途で使う（#{}（ハッシュ波カッコ））
• アニメの「原画（keyframes）」と「中割り（in-between）」とは概念的に似てる（比喩として使いやすい）
• 厳密には、Sass の#{$...}はコンパイル時の文字列挿入
  • ブラウザでの「アニメーション機能における動的なフレーム生成（実際に生成される中割）」とは異なる
• Sass 上の実用例
  • 動的クラス名
  • プロパティ名生成
  • ループで大量のユーティリティ生成
    • css で出力するコメントに、動的なループ回数も出力可能
  • アニメーション名の自動生成
    などに便利。
• ※注意点：**文字列挿入（＝コンパイル時）≠ランタイムでの数値補間（＝ブラウザのアニメーション）**は別物
  • 単に#{$}で数値の中身を計算しているわけじゃない場面もあるから要注意

---

1. interpolation、原義は？

英語の interpolate は「間に入れる」「補間する」。

• 数学では「既知の点の間を補って値を推定する」こと（数値補間）
• アニメでは「原画と原画の間を埋めて滑らかにする（＝中割り）」こと
• Sass では（#{$var} のように）文字列の中に変数や式を埋め込む操作を指すことが多い

⇒コンパイル時にコードの“穴”を埋めるイメージ

アニメの比喩は理解を助ける良い表現だけど、技術的には「Sass はコンパイル時に“文字列”を埋める」で、ブラウザのアニメーションは「実行時に値の間を滑らかにする（数値的補間）」という違いがある点は押さえておいて。

---

2. Sass での基本（例と説明）

基本的なクラス名の補間

$size: large;

.icon-#{$size} {
  font-size: 2rem;
}

コンパイル結果

.icon-large {
  font-size: 2rem;
}

#{$size} は文字列の挿入（置換）をしているだけ。

プロパティ名の生成

$prop: margin;

p {
  #{$prop}-top: 1rem;
}

コンパイル結果

p {
  margin-top: 1rem;
}

ループと組み合わせたユーティリティ生成

※コメントの出力も含む

@for $i from 1 to 3 {
  .mt-#{$i} {
    /* $i = #{$i} */
    margin-top: $i * 0.25rem; /* #{$i} * 0.25rem; */
  }
}

コンパイル結果

.mt-1 {
  /* $i = 1 */
  margin-top: 0.25rem; /* 1 * 0.25rem; */
}
.mt-2 {
  /* $i = 2 */
  margin-top: 0.5rem; /* 2 * 0.25rem; */
}

アニメーション名を自動生成

$anim: slide;

@keyframes #{$anim}-in {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

.element {
  animation: #{$anim}-in 0.6s ease;
}

コンパイル結果

@keyframes slide-in {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

.element {
  animation: slide-in 0.6s ease;
}

3. 「アニメの中割り」との関係（比喩の正体）

• アニメ：「原画（重要なコマ）を描き、原画同士の“間”を中割りで埋めて滑らかにする」→ ランタイム的な発想
• CSS アニメーション：ブラウザが keyframe の間を実行時に補間（interpolate）して滑らかに描画する（数値の線形補間など）
• Sass の#{$...}：“原画”に書くラベルや名前、ルールそのものをコンパイル時に生成する手段

つまり？

• 比喩は「考え方の助け」にはなる（原義である“間を埋める”は共通）

• 技術的に

  • Sass の補間は『文字列挿入（コンパイル時）』
  • ブラウザの補間は『数値的補間（実行時）』

  という違いを理解しておくこと。

4. 実践向けパターン集

a. 動的セレクタ生成

$mod: 'active';
.btn-#{$mod} {
  background: #0a9;
}

コンパイル結果

.btn-active {
  background: #0a9;
}

b. ループでユーティリティ生成

前述の mt- 例

c. 複雑なセレクタの組み立て(BEM 記法などで)

$blocks: ('card', 'modal', 'nav');
@each $b in $blocks {
  .#{$b}__title {
    font-weight: bold;
  }
}

コンパイル結果

.card__title {
  font-weight: bold;
}
.modal__title {
  font-weight: bold;
}
.nav__title {
  font-weight: bold;
}

d. keyframe のステップをループで作る

@keyframes steps-spin {
  @for $i from 0 through 6 {
    /* $i = #{$i} */
    $percent: ($i / 6) * 100%;
    #{$percent} {
      transform: rotate(#{30 * $i}deg);
    }
  }
}

コンパイル結果

@keyframes steps-spin {
  /* $i = 0 */
  0% {
    transform: rotate(0deg);
  }
  /* $i = 1 */
  16.66667% {
    transform: rotate(30deg);
  }
  /* $i = 2 */
  33.33333% {
    transform: rotate(60deg);
  }
  /* $i = 3 */
  50% {
    transform: rotate(90deg);
  }
  /* $i = 4 */
  66.66667% {
    transform: rotate(120deg);
  }
  /* $i = 5 */
  83.33333% {
    transform: rotate(150deg);
  }
  /* $i = 6 */
  100% {
    transform: rotate(180deg);
  }
}

5. 注意点・落とし穴

• Sass の#{$}は文字列挿入
  • 数値を「補間してアニメーションを作る」わけではない
• 単位や計算結果に注意：演算はできるだけ通常の Sass 式で行い、セレクタ名など「文字列として必要な部分」にのみ interpolation を使うのが安全
• 可読性：過度な自動生成は CSS が膨れやすい。出力 CSS を確認する習慣を

6.まとめ

• interpolation の原義は「間を埋める」。アニメの「中割り」アナロジーは分かりやすい
• Sass の#{$...}はコンパイル時の文字列挿入。動的に CSS ルールや名前を作るのに便利
• ブラウザ側の数値補間（アニメーション）とは役割が違う
• 実用パターン：動的クラス名、プロパティ名、ループ生成、キー名管理など