Question

我试图在较少的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

起初我也对此感到有些困惑，并发现自己跳过篮球让它发挥作用。虽然你的帖子已经足够大，但它可能会为我所知道的所有功能提供此功能。

无论如何，如果您只是尝试通过伪选择器向现有样式添加其他样式，则可以使用'＆amp;'运营商。它有点像'this'关键字，并将嵌套转换为简单组合。所以你应该能够做到：

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

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

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

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

a:visited {
    color: #84B6CD;
}

请注意，您也可以使用＆amp;组合'子选择器'：

.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部分。

Answer 2

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

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

如果我认为你的目标是重复使用你的链接样式：visit和：link，你实际上会想要这个：

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

a:link {
  .link;
}

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

Answer 3

不完全确定，您想要实现的目标。但如果你厌倦了：链接，：访问，：活跃（也就是正常链接）与：焦点，：悬停（悬停样式），这有效：

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

例如：

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

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

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

3 个答案: