Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

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

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

.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 { ... }
  }
}

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした