为每种颜色悬停颜色跨站点

Question

如果我有以下变量：

@text-c: #cccccc;

有没有一种方法可以指定颜色的悬停变体（在本例中为颜色 #aaaaaa）以便跨站点应用，而不必在每个单独的 :hover 规则中添加它？

Answer 1

如果您只想将变量值设置在一个公共位置而不是多个位置，您可以创建另一个变量并使用 darken 函数获取它的 hover 变体.

下面是一个示例片段。

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

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

另一方面，如果你只想在一个地方编写 hover 选择器本身，那么你可以将混合与父选择器 (&) 一起使用，并在所有相关位置调用它，例如在下面的片段中。这会将元素的悬停文本颜色设置为比默认文本颜色深 13.5%。

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

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

Answer 2

Mixin and extend 可能是您要查找的内容。变量本身并没有说明你如何或在哪里使用它（无论是对某些 color 属性还是不使用）或者你是否使用它。因此，不要依赖于一些间接逻辑，因为编译器无法猜测为每个具有 color: #cccccc 的元素插入 :hover {color: #aaaaaa}，首先因为 :hover "sub-style" 是不像属性那样跨元素继承（例如，如果您只设置 body {color: @text-c} 会怎么样？），使其明确，例如（未优化变体只是为了说明方法）：

// "color team"
.text-c() {
    color: #cccccc;
    &:hover {color: #aaaaaa}
}

// usage 

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

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

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

// etc.

实际优化（很可能 extend 使用某些模板而不是每次都复制相同的属性）将取决于 how/where/how-often/etc。您将要使用它以及（同样重要）如何（以及是否）计划对其进行自定义（例如，请参阅@Harry 关于如何制作通用混合而不是像我一样进行颜色值硬编码的回答多于）。

为每种颜色悬停颜色跨站点

Hover color cross-site for each color

css

less