有没有办法使用css伪类作为mixins与lesscss编译器？

Question

我试图在较少的css mixin中使用psuedo类的类

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;
  }
}

不幸的是,官方定义隐藏在文档的嵌套规则部分中.

Answer 2

我不相信你是如何在Less中使用mixin的.

您已定义链接伪类,然后将其嵌套在已访问的伪类下.这实际上并不意味着什么,这就是为什么你得到的输出.

如果我认为你的目标是重用你的链接样式:visit和:link,你实际上会想要这样:

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

a:link {
  .link;
}

a:visited{
  .link;
  color: #84B6CD;
}