css - 有没有办法将 css 伪类用作 lesscss 编译器的混合？

Question

我试图在 less css mixin 中使用带有伪类的类

a:link{
    color:#138CB4;
    text-decoration:none;
}
a:visited{
    a:link;
    color:#84B6CD;
}

但我得到的是这个，这是一个无效的 css

a:link{
    color: #138CB4;
    text-decoration: none;
}
a:visited{
    a: link;
    color: #84B6CD;
}

我是不是漏掉了什么，或者 mixins 还不支持伪类。

Answer 1

起初我也对此感到有点困惑，并且发现自己在努力让它发挥作用。尽管您的帖子已经足够老了，据我所知它可能早于此功能。

无论如何，如果您只是想通过伪选择器向现有样式添加额外的样式，您可以使用“&”运算符。它的工作方式有点像“this”关键字，并将嵌套变成一个简单的组合。所以你应该能够做到:

a {
  color: #138CB4;
  text-decoration: none;

  &:visited {
    color: #84B6CD;
  }
}

这应该编译成类似的东西:

a {
  color: #138CB4;
  text-decoration: none;
}

a:visited {
    color: #84B6CD;
}

请注意，您还可以使用 & 组合“子选择器”:

.outer {
  color: blue;

  .error {
    //this will select elements that are .error inside-of/descending-from .outer
  }

  &.error {
    //This will select elements that are .outer AND .error
    color: red;
  }
}

不幸的是，官方定义隐藏在 Nesting Rules 中。文档的一部分。