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

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

嵌套Stylus Mixins中的父选择器

1 个答案: