Sassの「& &」とかいう狂気

げこP @GeckoTang

なんかまぁ無理に .block のスコープに閉じ込めなくてもいいのかなって思ったりもするけど、むずかしいなあ

リャマ㌠ @roatnek

JSの即時関数的パッケージ感あって、これはこれでいいな「& &」

リャマ㌠ @roatnek

知見だ

事務員 @zimin9u

Sassの"&"ってなんだっけ？ #ポンコツ

事務員 @zimin9u

ああ、親の要素を参照するのか。 #ポンコツ

neotag @neotag

@zimin9u FYI html5experts.jp/kosei27/3297/

事務員 @zimin9u

@neotag 手元にある昔の自分が書いたSassコードじゃなくて、現代人の書いたモダンなSassコードを読まないとそろそろ窒息死しそう。

neotag @neotag

@zimin9u 僕も &__element が使えることを知ったのちょっと遅かったので窒息死のリスクは常に目の前にありますね。

neotag @neotag

なにかしらのお墨付きでみんなが知っている書き方にならない限り微妙だということは改めて確信できたので、TLに書いてよかった。

事務員 @zimin9u

.block { & & { &__element {} } } の展開が、なんで.block .block__elementになるのん？ ていうか途中の& &ってなんなの？ ウワーッ！ もうしのう！！

リャマ㌠ @roatnek

@zimin9u .block { .block .block { &__element { } } } と同義だよ

リャマ㌠ @roatnek

@zimin9u ああ、ちょっと違う、コンパイルの流れを説明しようとしたらコードとしては変になった、コードの意味では同義ではないけど説明としてはそういうこと

事務員 @zimin9u

@roatnek だよね。これって展開したら .block .block .block .block__element にならない…？ というより、.block .block__element と展開するだけなら途中の& &って要らなくない？ って疑問なんだけど……。

neotag @neotag

@zimin9u @roatnek ↓だと .block__element になるので .block に閉じ込められないので & & の登場です。 .block &__element

事務員 @zimin9u

@neotag @roatnek あー！ なるほどそーゆーことね！ よくそんなの思いつくな！

neotag @neotag

なんで思いつけたのかもはや覚えてないです。

げこP @GeckoTang

僕の最近のフォーマットは ```scss .block { $B: &; &--modifier { } &__item { &--modifier { } } } ``` かな〜

リャマ㌠ @roatnek

ああ、いったん変数に入れはるんや…

リャマ㌠ @roatnek

なるほどなあ。細かな工夫がみんなあるなあ。

neotag @neotag

& & が `.block .block` に展開されて、その後の &__element が `.block .block__element` に展開されるの、仕様の定義がほんのちょっとでも違ったら実現しなかった動きなので、だいぶハッキーではある。

事務員 @zimin9u

今って #{&} って書かなくていいの……！？

neotag @neotag

#{&} 時代だったら手間多すぎてこんなんやろうとも思わなかった。

neotag @neotag

あと、SASS 記法が気持よくて好き。 #快楽主義者

げこP @GeckoTang

SASS記法はちょっとつらいです

事務員 @zimin9u

なんだよ現代人のSass設計。久々に死を感じたぞ。