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

【问题标题】：Add pseudo classes with Stylus CSS preprocessor使用 Stylus CSS 预处理器添加伪类
【发布时间】：2015-04-13 04:06:07
【问题描述】：

我是 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

'anchor' 是一个创建选择器的 mixin。然而，我对这两种方法的尝试都没有真正成功。我能想到的最好的办法是：

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

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

【问题讨论】：

你为什么还要把它们都写出来？我相信a.className 就足够了。
现在我觉得自己完全愚蠢。我不记得为什么我指定了:hover/:visited。它完全按照您的建议工作。

标签： css mixins stylus

【解决方案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 选择器。

【讨论】：