嵌套手写笔 Mixins 中的父选择器

Question

是否有选择器或可用的 hack 来通过 mixin 向父级添加样式？它只需要在有嵌套设置的情况下工作。例如，如果我有：

#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

我有一个 mixin 可以垂直对齐元素，如下所示：

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

这完全符合我的预期，但我还想将tranform-style preserve-3d 添加到父元素#overbox，以防止边框模糊等。我没有成功。我正在寻找类似的东西：

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

有人知道解决方案/解决方法吗？

Answer 1

目前没有基于实际 Stylus 嵌套树的此类功能，但您可以使用 selector() bif 通过修改其结果来模拟它：

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

几乎可以做你想做的事。由于这不是“真正的”父级，而只是选择器的一部分，在空格组合器之后没有最后一个简单选择器，您可能想要更深入，因为有一个可选的$depth 参数。