補完：#{}

Sassは補完を行うための構文として#{}を用意しています。

変数に入った文字列は通常は値として認識されてエラーが出てしまうので、そのままだとプロパティの値にしか使用できませんが、 シャープ記号を前に置いた波括弧 #{}と組み合わせることでセレクタやプロパティ名にも使うことができるようになります。

以下はセレクタとプロパティに変数へ代入した文字列を使用するサンプルです。

$name: note;
$attr: border;

p.#{$name} {
  #{$attr}-color: blue;
}

コンパイルすると、変数を使用した所がきちんと文字列に置き換わっています。

p.note {
  border-color: blue; }

#{}を使えばプロパティの値にSassScriptを置くことができます。
とはいえ、変数や関数、数式などをプロパティの値で使うことは普通にできるので、#{}が出てきた時は Sassのコンパイラに#{}に入れたものを素のCSSとして扱われたいという時に使うことになります。

以下はfontプロパティで変数を使用する例です。

p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}

font プロパティでスラッシュを使っても普通は割り算にはなりませんが、値が変数である場合は計算式の条件に当てはまってしまうため割り算になってしまいます。
ですが変数を#{}に入れると数値として扱われるようになるため、コンパイル結果は期待通りのものになります。

p {
  font: 12px/30px; }

クォートで囲った文字列の中で#{} を使うと…

p:before {
  content: "I ate #{5 + 10} pies!";
}

p:before {
  content: "I ate 15 pies!"; }

#{}で計算が行われた結果だけが反映されます。関数を使った場合も同様です。

#{}に入れられた値や結果が空（nullや空文字など）の場合は

$value: null;

p:before {
  content: "I ate #{$value} pies!";
}

p:before {
  content: "I ate  pies!"; }

このように、なにも出力されません。

@規則での利用

#{}はバージョン3.2から@規則（アットルール）でも使えるようになりました。
@import、@charset、@font-face、@keyframes、@media、 @pageなどがあります。

@mediaで使うとこんな感じです。

$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;

@media #{$media} and ($feature: $value) {
...
}

@keyframesではアニメーション名を変数にすることができます。

@-webkit-keyframes $name {
...
}

属性セレクタでの利用

属性セレクタの値に使うとエラーになってしまうバグがあったんですが、修正されました。
引用符の有無にかかわらず使用することができます。

input[type=#{$type}] {
...
}