補間

補間は、Sassスタイルシートのほぼどこでも使用して、SassScript式の結果をCSSのチャンクに埋め込むことができます。次のいずれかの場所で、式を#{}で囲むだけです。

プレイグラウンド

SCSS構文

@mixin corner-icon($name, $top-or-bottom, $left-or-right) {
  .icon-#{$name} {
    background-image: url("/icons/#{$name}.svg");
    position: absolute;
    #{$top-or-bottom}: 0;
    #{$left-or-right}: 0;
  }
}

@include corner-icon("mail", top, left);
プレイグラウンド

Sass構文

@mixin corner-icon($name, $top-or-bottom, $left-or-right)
  .icon-#{$name}
    background-image: url("/icons/#{$name}.svg")
    position: absolute
    #{$top-or-bottom}: 0
    #{$left-or-right}: 0



@include corner-icon("mail", top, left)

CSS出力

.icon-mail {
  background-image: url("/icons/mail.svg");
  position: absolute;
  top: 0;
  left: 0;
}

SassScript内SassScript内のパーマリンク

互換性（モダン構文）
Dart Sass
✓
LibSass
✗
Ruby Sass
4.0.0以降（未リリース）

LibSassとRuby Sassは現在、SassScriptでの補間の解析に古い構文を使用しています。ほとんどの実用的な目的では同じように機能しますが、演算子の周辺で奇妙な動作をする可能性があります。詳細については、このドキュメントを参照してください。

補間は、SassScriptで、SassScriptをクォートされていない文字列に挿入するために使用できます。これは、動的に名前を生成する場合（たとえばアニメーションの場合）や、スラッシュ区切りの値を使用する場合に特に便利です。SassScriptでの補間は常にクォートされていない文字列を返すことに注意してください。

プレイグラウンド

SCSS構文

@mixin inline-animation($duration) {
  $name: inline-#{unique-id()};

  @keyframes #{$name} {
    @content;
  }

  animation-name: $name;
  animation-duration: $duration;
  animation-iteration-count: infinite;
}

.pulse {
  @include inline-animation(2s) {
    from { background-color: yellow }
    to { background-color: red }
  }
}
プレイグラウンド

Sass構文

@mixin inline-animation($duration)
  $name: inline-#{unique-id()}

  @keyframes #{$name}
    @content


  animation-name: $name
  animation-duration: $duration
  animation-iteration-count: infinite


.pulse
  @include inline-animation(2s)
    from
      background-color: yellow
    to
      background-color: red

CSS出力

.pulse {
  animation-name: inline-uifpe6h;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}
@keyframes inline-uifpe6h {
  from {
    background-color: yellow;
  }
  to {
    background-color: red;
  }
}

💡 豆知識

補間は文字列に値を挿入するのに役立ちますが、それ以外の場合はSassScript式ではめったに必要ありません。プロパティ値で変数を使用するためだけに必要というわけではありません。color: #{$accent}と記述する代わりに、color: $accentと記述するだけで済みます！

⚠️ 注意！

数値で補間を使用することは、ほとんどの場合悪い考えです。補間は、それ以上の計算に使用できないクォートされていない文字列を返し、単位が正しく使用されることを保証するためのSassの組み込み保護を回避します。

Sassには、代わりに使用できる強力な単位演算があります。たとえば、#{$width}pxと記述する代わりに、$width * 1pxと記述します。あるいは、$width変数を最初からpxで宣言することをお勧めします。そうすれば、$widthに既に単位が含まれている場合、不正なCSSをコンパイルする代わりに、適切なエラーメッセージが表示されます。

クォートされた文字列クォートされた文字列のパーマリンク

ほとんどの場合、補間は、式がプロパティ値として使用された場合に使用されるのとまったく同じテキストを挿入します。ただし、1つの例外があります。クォートされた文字列の周りの引用符は（それらのクォートされた文字列がリストにある場合でも）削除されます。これにより、SassScriptで許可されていない構文（セレクターなど）を含むクォートされた文字列を記述し、それらをスタイルルールに補間することが可能になります。

プレイグラウンド

SCSS構文

.example {
  unquoted: #{"string"};
}
プレイグラウンド

Sass構文

.example
  unquoted: #{"string"}

CSS出力

.example {
  unquoted: string;
}

⚠️ 注意！

この機能を使用してクォートされた文字列をクォートされていない文字列に変換するのは魅力的ですが、string.unquote()関数を使用する方がはるかに明確です。#{$string}の代わりに、string.unquote($string)と記述してください！