css - 因式分解 :hover mixin with Less

Question

这周我开始较少样式表开发。

我当前的元素有许多不同颜色的链接，例如:

#dev-team a {
    color: #D09EBA;
}
#admin-team a {
    color: #0C3FDA;
}
#test-team a {
    color: #009FD1;
}
...

我正在做的是添加标准颜色的悬停颜色变亮:

#dev-team a {
    color: #D09EBA;
    &:hover{
        lighten(#D09EBA, 7%);
    }
}
#admin-team a {
    color: #0C3FDA;
    &:hover{
        lighten(#0C3FDA, 7%);
    }
}
...

我想知道是否可以使用 less mixin 或 less function 来避免为我拥有的每个不同颜色链接编写这一行，例如分解。

Answer 1

您可以使用参数混合 http://lesscss.org/features/#mixins-parametric-feature

例如，您可以这样编写 CSS:

.colored-link(@color) {
    color: @color;
    &:hover{
        color: lighten(@color, 7%);
    }
}
#dev-team a {
    .colored-link(#D09EBA);
}
#admin-team a {
    .colored-link(#0C3FDA);
}

代码未经测试但应该可以工作。

希望这对您有所帮助。