Question

本周我开始使用 less 样式表开发。

我目前的项目有很多不同颜色的链接，如：

#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

您可以使用参数化mixin 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);
}

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

希望这有帮助。

Answer 2

在您的情况下，Xavier的正确答案可以进一步减少编码，如下所示：

<强> LESS

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

CSS输出

#dev-team a {
  color: #d09eba;
}
#dev-team a:hover {
  color: #dcb6cb;
}
#admin-team a {
  color: #0c3fda;
}
#admin-team a:hover {
  color: #174ef2;
}
#test-team a {
  color: #009fd1;
}
#test-team a:hover {
  color: #00baf5;
}

分解：悬停mixin与Less

2 个答案: