Thursday 15 May 2014

css - Parent Selector in Nested Stylus Mixins -



css - Parent Selector in Nested Stylus Mixins -

is there selector or available hack add together styles parents through mixin? need work in cases there nested set up. example, if have:

#overbox width 100vw height 100vh position fixed top 0 left 0 background-color rgba(90,90,90,.9) #contentbox width 480px height 320px background-color #e4e4e4

i have mixin vertically align element, so:

valign() position relative top 50% transform translatey(-50%)

which works i'd expect, add together tranform-style preserve-3d parent element, #overbox, prevent border fuzziness, etc. i've had no success. looking work like:

valign() position relative top 50% transform translatey(-50%) &:parent transform-style preserve-3d

anyone know solution/workaround?

there no such feature based on actual stylus nesting tree, can mimic using selector() bif modifying result:

pseudo-parent($depth = 1) $selectors = split(',', selector()) $selector, $i in $selectors $selector = split(' ', $selector) $selector = $selector[0..length($selector) - (1 + $depth)] $selectors[$i] = join(' ', $selector) homecoming '/' + join(',', $selectors) valign($depth = 1) position relative top 50% transform translatey(-50%) {pseudo-parent($depth)} transform-style preserve-3d

would thing you'd to. not “true” parent, part of selector without lastly simpleselector after space combinator, want go deeper, there optional $depth argument.

css mixins stylus

No comments:

Post a Comment