Stylus(0.47.3)で@extend
する時に変なはまり方をした。
.foo:before
content '\f101'
このような擬似要素のあるセレクターを以下のように@extend
するとコンパイルエラーになる。
.bar
@extend .foo
// こうコンパイルされてほしい
// .foo:before,
// .bar:before {
// content: '\f101';
// }
実行するとFailed to @extend ".foo"
と言われる。回避方法は
.foo
&:before
content '\f101'
のように:before
をネストすること。反対にかっこわるいがネストしていないセレクターの表記をそのまま使うこともできる。
.bar:before
@extend .foo:before
つまりStylusでは@extend
する際に元のセレクターと同じ表記で指定する必要がある。バグのような気がする。この現象はSassでは起こらず、問題なく解釈してくれる。