インターポレーションは変数が参照できない場所でも使うことができるようにする機能です。通常Sassの変数はプロパティ値から参照して使用します。この場合インターポレーションは必要ありません。

$red: #ff0000;

.item {
  color: $red;
}

ですがプロパティ値以外、例えばセレクタ名の一部で変数を使用したい場合もあります。以下は親の参照が&ではできないため、変数を使用したいケースです。ただし以下のように記述するとどこまでが変数名か区別できずエラーになってしまいます。

.products-item {
  $this: &;

  &-ttl {
    margin-right: 20px;
  }

  &:nth-child(even) {
    $this-ttl {
      margin-right: 0;
      margin-left: 20px;
    }
  }
}

そこで、セレクタ名で変数を使用する場合はインターポレーションを使用します。インターポレーションは#{$変数名}のように記述します。

.products-item {
  $this: &;

  &-ttl {
    margin-right: 20px;
  }

  &:nth-child(even) {
    #{$this}-ttl {
      margin-right: 0;
      margin-left: 20px;
    }
  }
}

これで以下の通り、正常にコンパイルができます。

.products-item-ttl {
  margin-right: 20px;
}

.products-item:nth-child(even) .products-item-ttl {
  margin-right: 0;
  margin-left: 20px;
}