71159


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

[BEMのmodifierでスタイルを切り替える時の書き方 -
Qiita](https://qiita.com/resistance_gowy/items/282363caa748f42e38dc)

**scss**

[code]

    .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;
      }
    }
    
[/code]

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

[code]

    .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;
    }
    
[/code]

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


CC BY-SA 4.0
2020-10-12T14:35:54.773
71141
2020-10-13T04:33:26.950
2020-10-13T02:02:59.873
22565
22565
question
html css html5 sass
SCSSの記法で出てくる $this: & !global; の意味は？


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

[code]

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

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

[code]

    .p-hoge {
      $this: & !global;
      display: flex;
      background-color: #f00;
    }
    
    #{$this}__photo {
      width: 100px;
    }
    
[/code]


CC BY-SA 4.0
2020-10-13T04:33:26.950
71159
2020-10-13T04:33:26.950
32986
71141
answer