Question

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

$link
    color #777
    display block

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

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

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

或者说，

anchor(className)
    @extends $link

其中＆＃39;锚定＆＃39;是一个创建选择器的mixin。然而，我对这两种方法的尝试都没有成功。我能想到的最好的是：

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

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

1 个答案: