Question

我现在已经摆弄了Stylus了一段时间，并希望用一种混合物来完成某些事情感觉它应该是可能的，即使我无法弄明白。具体来说，我想编写一个mixin来设置应用mixin的元素的父级。例如，我永远无法记住使用伪元素垂直居中的正确语法，所以我希望有一个方便的花花公子混合它;但我理想的是将它应用于要居中的元素，而pseduo元素属于该元素的父元素。

毫不奇怪，这不起作用：

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()

...实际上可能有点混淆Stylus，因为它生成的CSS有两个.nav-wrapper .nav块：

.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;
}

我的猜测是，我使用块混合物会减少悲伤，但我感觉到我已经通过.nav和.nav-wrapper的常用样式了对它而言似乎就是痛苦。

Answer 1

使用块mixin是您的最佳方式：

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

当Stylus获得更强大的家长引用支持时，您将能够按照自己的方式行事 - https://github.com/LearnBoost/stylus/issues/1240

手写笔mixin指的是混合元素的父母？

1 个答案: