Css 将颜色悬停在每个颜色的交叉站点上

如果我有以下变量：

@text-c: #cccccc;

---

有没有办法指定颜色的悬停变量（在本例中是颜色

#aaaaaa

），以便跨站点应用，而不必在每个单独的

：hover

规则中添加它？

如果您只想在一个公共位置而不是多个位置设置变量值，您可以创建另一个变量，并使用

变暗

函数来获取该变量的

悬停

变量

下面是一个示例代码段

@text-c: #cccccc;
@text-c-hover: darken(@text-c, 13.5%);

a{
    color: @text-c;
    &:hover{
        color: @text-c-hover;
    }
}

另一方面，如果您只想在一个位置写入

悬停

选择器本身，那么您可以使用与父选择器（

&

）的混合，并在所有相关位置调用它，如下面的代码段中所示。这会将元素的悬停文本颜色设置为比默认文本颜色暗13.5%

.hover(@input){
    &:hover{
        color: darken(@input, 13.5%);
    }
}

#demo{
    @color: #aaaaaa;
    color: @color;
    .hover(@color);
}

这可能就是你要找的。变量本身还没有说明如何或在何处使用它（无论是否用于某些

颜色
属性），或者是否使用它。
因此，与其依赖一些间接逻辑，编译器无法猜测为每个具有
颜色的元素插入
：hover{color:#aaaaaa}
，首先是因为
：hover
“子样式”不像属性那样在元素之间继承（例如，如果您只设置
body{color:@text-c}，该怎么办
？），使其明确，例如（不只是为了说明方法而优化变量）：

实际优化（很可能是扩展某个模板，而不是每次复制相同的属性）取决于如何/在哪里/多久使用一次/等等。您将使用它，以及（并非不那么重要）您计划如何（以及是否）定制它（例如，请参见@Harry关于如何制作通用混音而不是像我上面那样硬编码颜色值的回答）。
看起来OP只是在寻找硬编码颜色值选项。
// "color team"
.text-c() {
    color: #cccccc;
    &:hover {color: #aaaaaa}
}

// usage 

div.zoo {
    .text-c();
}

span.park {
    .text-c();
}

td#life {
    .text-c();
}

// etc.