SCSS で&を後置した時の忘備録

タイトルの通り、後置で & を書きたい時に軽く詰まったので
簡単に忘備録を残しておきます。

テーブルに拡張クラスを追加する時、
既存のクラスの後ろに追加したクラス名が付くように書き出されて欲しいとか思って
以下のような事をすると物の見事にエラーで怒られました。

.table-my {
  .table& th,
  .table& td { padding-right: 2em }
}

と言う事で軽く調べてみると、下記の記事に幾らか参考になりそうな記述が。
Sass 3.3で追加された「&」の新機能と@at-rootまとめ解説 | HTML5Experts.jp

#{&} と書く方法もあるそうで。
文字列に連なる場合は判別できないんでしょうね。

早速でこうしてみた。

.table-my {
  .table#{&} th,
  .table#{&} td { padding-right: 2em }
}

ら…、.table-my .table.table-my tX とコンパイルされた。。
いやいや、、なに繰り返しとんねん！ と。

もうちょっと読んでみると @at-root と言うのがあるそうで、
以下のようにすると意図通りの結果になった。

.table-my {
  @at-root {
    .table#{&} th,
    .table#{&} td { padding-right: 2em }
  }
}

ほんまにコレで良いんでしょうかね。。？

時間をかけずに素直にやりたければ下記にするのがベターでしょう。
たまにそれでは行けないケースもありそうではありますが。

.table-my {
  &.table th,
  &.table td { padding-right: 2em }
}

追記 @ 2017-02-20

こう書いた方が綺麗ですんなり行く気がしたので追記しておきます。

.table {
  &#{&}-my th,
  &#{&}-my td { padding-right: 2em }
}

余談

参考にした記事は数年前の物のようですが、
BEM は今だと以下の様な書き方が出来ると思います。

.block {
  ...

  // .block__element
  &__element {
    ...

    // .block__element--modifier
    &--modifier { ... }
  }
}

変なこと書いてましたら突いてやってくださいませ。
以上！