在Stylus中扩展占位符选择器

Question

在Sass中，我可以从我的选择器树的任何位置@extend %placeholder选择器，例如：

.category {
  .category-dropdown {
    button {
      visibility: hidden;
      @extend %category-hovered-button;
    }
  }
  &:hover {
    %category-hovered-button {
      visibility: visible;
    }
  }
}

Working on lib sass (v3.2.5)

但在Stylus中，我不能@extend以类似的方式。 我认为这是因为Stylus占位符选择器的性质不同。

那么我怎样才能在手写笔中做这个干燥的事情呢？

尝试将$替换为.，并尝试在&:hover之前移动.category-dropdown子树。

Answer 1

这是一个可能的解决方案：

.category {
  $prefix = selector()
  hovered() {
      /{$prefix}:hover {selector('^[1..-1]')} {
        {block}
      }
    }
  }
  category-hovered-button() {
    +hovered() {
      +cache() {
        visibility: visible
      }
    }
  }

  .category-dropdown {
    button {
      visibility: hidden
      category-hovered-button()
    }
  }
  .category-other {
    a {
      visibility: hidden
      category-hovered-button()
    }
  }
}

编译成：

.category .category-dropdown button {
  visibility: hidden;
}
.category:hover .category-dropdown button,
.category:hover .category-other a {
  visibility: visible;
}
.category .category-other a {
  visibility: hidden;
}

这可能不是你想要的，但它确实让事情变干。正如你所说，Stylus的@extend行为比Sass简单。

第4行只是将.category替换为.category:hover，同时保持100％干预。方法如下：

• The selector() function计算当前选择器，可选地附加一些附加选择器。
• ^[1..-1]是一种特殊的切片语法，在这种情况下省略了选择器的第一部分。 （.category）
• The / prefix告诉Stylus不要在选择器前面添加任何父选择器。
• {}执行插值。

由于category-hovered-button是mixin，并且您可能不想要重复的CSS规则，因此我使用+cache()启用了缓存