css - Stylus mixin referring to the mixed-in element's parent? -
i've been fiddling stylus bit now, , wanted accomplish mixin feels like should possible though can't figure out. specifically, i'd write mixin styles parent of element mixin applied. can never remember right syntax vertically centering pseudo-element, example, i'd have handy-dandy mixin it; i'd ideally apply element centered, , pseduo-element belongs on element's parent.
not surprisingly, didn't work:
vertical-middle() display inline-block vertical-align middle & font-size 0 &::before content '' display inline-block height 100% vertical-align middle .nav-wrapper .nav vertical-middle() ...and in fact may have confused stylus bit, since css generated had 2 .nav-wrapper .nav blocks:
.nav-wrapper .nav { display: inline-block; vertical-align: middle; } .nav-wrapper .nav { font-size: 0; } .nav-wrapper .nav::before { content: ''; display: inline-block; height: 100%; vertical-align: middle; } my guess i'd less grief block mixin, sense i'd wind passing usual styles .nav , .nav-wrapper , seems way lies pain.
using block mixin best way in case:
vertical-middle($sel) {$sel} display inline-block vertical-align middle {block} font-size 0 &::before content '' display inline-block height 100% vertical-align middle .nav-wrapper +vertical-middle('.nav') foo: bar you able way when stylus gets support more powerful parent references - https://github.com/learnboost/stylus/issues/1240
Comments
Post a Comment