以下の記事で紹介されている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で変数の前に#を付けたり、あのような書き方があるのを知りませんでした。公式のドキュメントなどにも書かれているのでしょうか?