Question

如果我有以下变量：

@text-c: #cccccc;

有没有办法指定颜色的悬停变体（在本例中为颜色#aaaaaa），因此它适用于跨站点，而不必在每个单独的:hover规则中添加它？< / p>

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选择器本身，那么你可以使用一个带有父选择器（&）的mixin并调用它所有相关的地方，比如下面的片段。这会将元素的悬停文本颜色设置为默认文本颜色的13.5％。

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

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

Answer 2

Mixin和extend可能就是你要找的东西。变量本身并没有说明你如何或在何处使用它（无论是对于某些color属性）还是根本不使用它。因此，不是依赖于某些间接逻辑，因为编译器无法猜测为:hover {color: #aaaaaa}的每个元素插入color: #cccccc，首先因为:hover“子样式”是没有像属性那样继承元素（例如，如果你只设置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某些模板而不是每次都复制相同的属性）将取决于如何/在何处/如何经常/等。你打算使用它（并不是那么重要）你如何（以及如果）计划自定义（例如，请参阅@Harry关于如何制作通用mixin的答案，而不是像我那样使用颜色值硬编码以上）。

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

2 个答案: