css - 在 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 占位符选择器的性质不同。

那么我怎样才能在 Stylus 中完成这个 DRY 事情呢？

尝试将 $ 替换为 .，并尝试将 &: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% DRY。方法如下:

• > The selector() function计算当前选择器，可以选择附加一些附加选择器。
• > ^[1..-1]是一种特殊的切片语法，在本例中省略了选择器的第一部分。 (.category)
• > The / prefix告诉 Stylus 不要给选择器加上任何父选择器的前缀。
• > {}执行插值。

因为 category-hovered-button 是一个 mixin，你可能不想要重复的 CSS 规则，我用 +cache() 启用了缓存。