SASS / BEM - Not TIL but still some interesting magic
Case 1 - we don’t want to write parent classname again from deep nesting
.some-class
$this: &
&.--sub
margin-top: 2.4rem
#{$this}__title // so it is .some-class__title
font-size: 1.7rem
equals:
.some-class.--sub
margin-top: 2.4rem
.some-class.--sub .some-class__title
font-size: 1.7rem
Case 2 - we want to have a (or any another tag) before parent class from deep nesting
.btn
margin-top: 2.4rem
@at-root a#{&} // so it is a.btn
font-size: 1.7rem
equals:
.btn
margin-top: 2.4rem
a.btn
font-size: 1.7rem
Tweet