CODEWITHSUNDEEP
cssmixinsstylus
Zach Dahl
Zach Dahl

Reputation: 637

Parent Selector in Nested Stylus Mixins

Is there a selector or available hack to add styles to parents through a mixin? It would only need to work in cases where there is a nested set up. For example, if I were to 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 a mixin to vertically align an element, like so:

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

Which works exactly like I'd expect, but I would like also to add tranform-style preserve-3d to the parent element, #overbox, to prevent border fuzziness, etc. I've had no success. I am looking for something that would work like:

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

Anyone know a solution/workaround?

Upvotes: 2

Views: 1646

Answers (1)

kizu
kizu

Reputation: 43224

There is no currently such feature that would be based on the actual Stylus nesting tree, but you can somewhat mimic it using selector() bif by modifying its result:

pseudo-parent($depth = 1)
  $selectors = split(',', selector())
  for $selector, $i in $selectors
    $selector = split(' ', $selector)
    $selector = $selector[0..length($selector) - (1 + $depth)]
    $selectors[$i] = join(' ', $selector)
  return '/' + join(',', $selectors)

valign($depth = 1)
  position relative
  top 50%
  transform translateY(-50%)

  {pseudo-parent($depth)}
    transform-style preserve-3d

Would do almost the thing you'd like to. As this is not the “true” parent, but only the part of the selector without the last simpleselector after the space combinator, you could want to go deeper, for that there is an optional $depth argument.

Upvotes: 1

Related Questions