使用 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

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

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

虽然这有效，但我不确定它是否比原来的更清晰。非常感谢guidance/help！

Answer 1

为了回答问题，您在这里不需要混入，因为它们会生成属性。您需要一个函数，它将 return 一个被操纵的字符串，然后可以稍后对其进行插值：

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 选择器。

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

Add pseudo classes with Stylus CSS preprocessor

css

stylus

mixins

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

Add pseudo classes with Stylus CSS preprocessor

css

stylus

mixins

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