使用较少CSS对基值执行操作

嗨，我是新来的使用较少，并试图充分利用它提供的功能。我想做的是：

假设我在html中有一些锚元素

<a href="#" class="blue-link">Blue link</a>
<a href="#" class="red-link">Red link</a>
<a href="#" class="green-link">Green link</a>

我有下面的css

.gen-link-prop {
    text-decoration: none;
    padding: 10px 40px;
    color: #fff;
    display: inline-block;
    margin: 0 5px;
}
@blue-link-color: #9999ff;
@red-link-color: #ff9999;
@green-link-color: #99ff99;

.blue-link {
    .gen-link-prop;
    background-color: @blue-link-color;
}

.red-link {
    .gen-link-prop;
    background-color: @red-link-color;
}

.green-link {
    .gen-link-prop;
    background-color: @green-link-color;
}

.blue-link:hover, .red-link:hover, .green-link:hover {
    background-color: darken(@<-- reference to base color here--<, 20%);       
}

.gen链接道具{
文字装饰：无；
填充：10px 40px；
颜色：#fff；
显示：内联块；
利润率：0.5px；
}
@蓝色链接颜色：#9999ff；
@红色链接颜色：#ff9999；
@绿色链接颜色：#99ff99；
.蓝色链接{
.gen link道具；
背景颜色：@蓝色链接颜色；
}
.红色链接{
.gen link道具；
背景颜色：@红色链接颜色；
}
·绿色链接{
.gen link道具；
背景颜色：@绿色链接颜色；
}
.蓝色链接：悬停，.红色链接：悬停，.绿色链接：悬停{
背景色：变暗（@我不认为你可以编写一个普通的
a:hover
选择器，并将
a
的底色变暗（甚至不能用更少的颜色）。但是我记得看到了一种不同的方法，包括放置一个较暗的（带黑色的）选择器在元素悬停时覆盖在元素的顶部。我更新了代码，以便为每个特定类使用悬停。在更简单的情况下，这应该可以工作（就像只是为所有悬停添加一个通用颜色）。我要做的是将函数应用于实际值。我的意思是，不能将它们分组到一个规则中（使用一个选择器或一组选择器）。嗯，好吧，这就是我所想的，也许这是不可能的。我想知道是否有一种方法可以引用属性的基本值并对其进行修改。还有其他链接的Q&a。