2

我创建了许多 mixin 来加快为每个状态设置锚属性。在这个例子中，我有一个 fortext-decoration和另一个 for的 mixin background-color。

.link-text-decoration(@default, @hover, @active, @visited)
{
    text-decoration: @default;
    &:hover
    {
        text-decoration: @hover;
    }
    &:active
    {
        text-decoration: @active;
    }
    &:visited
    {
        text-decoration: @visited;
    }
}

.link-background-color(@default, @hover, @active, @visited)
{
    background-color: @default;
    &:hover
    {
        background-color: @hover;
    }
    &:active
    {
        background-color: @active;
    }
    &:visited
    {
        background-color: @visited;
    }
}

当呈现为 CSS 时，我发现它没有合并伪类，而是重新声明了另一个伪类。

LESS CSS 调用 Mixins

.link
{
    .link-text-decoration(underline, none, none, underline);
    .link-background-color(#fff, #ccc, #ddd, #fff);
}

结果

有hover,active和的 2 个实例visited。

.link {
  text-decoration: underline;
  background-color: #ffffff;
}
.link:hover {
  text-decoration: none;
}
.link:active {
  text-decoration: none;
}
.link:visited {
  text-decoration: underline;
}
.link:hover {
  background-color: #cccccc;
}
.link:active {
  background-color: #dddddd;
}
.link:visited {
  background-color: #ffffff;
}

期望的结果

理想情况下，我希望值如下所示，因为这样会更有效率。

.link {
  text-decoration: underline;
  background-color: #ffffff;
}
.link:hover {
  text-decoration: none;
  background-color: #cccccc;
}
.link:active {
  text-decoration: none;
  background-color: #dddddd;
}
.link:visited {
  text-decoration: underline;
  background-color: #ffffff;
}

我玩过Extend 函数和CSS Tricks上的示例，但这似乎不适用于这种情况。

有任何解决方案、指导或建议吗？谢谢，

4

0 回答 0