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

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

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

Answer 2

我不相信这就是你在 Less 中使用 mixin 的方式。

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

如果我认为您的目标是在 :visited 和 :link 中重用您的链接样式，那么您实际上会想要这个：

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

a:link {
  .link;
}

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

Answer 3

不完全确定，你想要实现什么。但是，如果您厌倦了 :link,:visted,:active （又名普通链接）与 :focus, :hover （悬停样式），则可以使用：

.anchor( @- ) {
    a, a:link, a:visited, a:active {
        @-();
    }
}
.anchorH( @- ) {
    a:focus, a:hover {
        @-();
    }
}

例如：

.anchor({
    background: #fff;
});

.anchorH({
    background: #ddd; /* darken on hover or focus */
});