使用 Stylus CSS 预处理器添加伪类

Question

我是Stylus CSS预处理器的新手，但到目前为止我所看到的我真的很喜欢。无论如何，我有以下css：

$link
    color #777
    display block
...
a.className, a.className:hover, a.className:visited
    @extends $link

$link也在其他地方使用。这工作得很好。但是，我确信必须有一些方法可以避免在行中重复输入a.className："a.className，a.className：hover，a.className：visited"。也就是说，我希望能够做的是这样的：

a.className, &:hover, &:visited
    @extends $link

或者，说

anchor(className)
    @extends $link

其中"锚点"是创建选择器的混合。然而，我对这两种方法的尝试都没有真正成功。我能想到的最好的是：

a.className
    &:link
    &:hover
    &:visited
        @extends $link

虽然这有效，但我不确定它是否比原版更清晰。任何指导/帮助非常感谢！

Answer 1

为了回答这个问题，你在这里不需要mixin，因为它们会生成属性。你需要一个函数来返回一个纵的字符串，然后可以稍后插入：

mono-link(className)
  states = 'link', 'hover', 'visited'
  parent = 'a.' + className
  retList = (parent)
  for state in states
    push(retList, parent + ':' + state)
  return join(',', retList)
$link
  color #777
  display block
{mono-link(someclass)}
  @extend $link

收益 率

a.someclass,
a.someclass:link,
a.someclass:hover,
a.someclass:visited {
  color: #777;
  display: block;
}

然而，这真的不是你应该写的CSS，尤其是display: block部分，因为它将从a.someclass选择器继承。