0

以下の記事で紹介されているBEM記法に $this: & !global; という記法が見られるのですが、どういう意味でしょうか?

BEMのmodifierでスタイルを切り替える時の書き方 - Qiita

scss

.p-hoge{
  $this: & !global;
  display:flex;
  background-color:#f00;
  &--reverse{
    background-color:#00f;
  }
}
.p-hoge__photo{
  width:100px;
  #{$this}--reverse &{
    order:1;
  }
}
.p-hoge__text{
  font-size:1.5rem;
  #{$this}--reverse &{
      order:0;
  }
}

scssをcssにコンパイルすると下記のcssが出来ました。

.p-hoge {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background-color: #f00;
}

.p-hoge--reverse {
  background-color: #00f;
}

.p-hoge__photo {
  width: 100px;
}

.p-hoge--reverse .p-hoge__photo {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}

.p-hoge__text {
  font-size: 1.5rem;
}

.p-hoge--reverse .p-hoge__text {
  -webkit-box-ordinal-group: 1;
      -ms-flex-order: 0;
          order: 0;
}

おそらく変数の中には.p-hogeが入っているように見えます。しかしscssで変数の前に#を付けたり、あのような書き方があるのを知りませんでした。公式のドキュメントなどにも書かれているのでしょうか?

1 件の回答 1

0

まず $this: & !global; は、 <variable>: <expression> の形式であり、 $this という名称の変数を定義しているとわかります[1]。次に、ここで用いられているアンパサンド (&) は Sass における親セレクターです。親セレクターはネストされたステートメントにおいて、その親に相当するステートメントのセレクタに置き換えられます[2]。つまり、以下のコードではアンパサンドは .p-hoge となります。

.p-hoge {
  $this: & !global;
  display: flex;
  background-color: #f00;
  &--reverse {
    background-color: #00f;
  }
}

最後に !global!global フラグと呼ばれています。!global フラグが設定された変数宣言はグローバルスコープにて変数宣言が行った場合と同様に、変数のスコープが最上位となります[1]。たとえば、次のコードのコンパイル結果として、 .p-hoge および .p-hoge__photo クラスが作成されます。

.p-hoge {
  $this: & !global;
  display: flex;
  background-color: #f00;
}

#{$this}__photo {
  width: 100px;
}
2
  • ありがとうございます。変数のスコープが上位になるという事はp-hogeの外側でも変数が使用できるようになるという事ですね。
    – wataru
    Commented 2020年10月13日 6:18
  • @wataru さん> はい、その理解で合っていると思います。
    – supa
    Commented 2020年10月13日 7:13

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。