分解:悬停mixin与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%);
    }
}
...

我想知道是否可以使用更少的mixin或更少的函数来避免为每个不同的颜色链接写一行,比如分解.

Answer 1

您可以使用参数混合http://incss.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);
}

代码未经测试但应该有效.

希望这可以帮助.