哈弗颜色跨站点为每种颜色

Question

如果我有以下变量：

@text-c: #cccccc; 

是否有指定颜色的悬停变种（在这种情况下，颜色#aaaaaa）的方式，因此适用交叉网站，而不必在每个单独的:hover规则中添加它？

Answer 1

Mixin和extend可能是你在找什么。变量本身并没有说明你如何或在哪里使用它（无论是否对某些color属性），或者如果你使用它。 所以不是依靠一些间接逻辑，因为没有办法让编译器猜测为每个具有color: #cccccc的元素插入:hover {color: #aaaaaa}，首先是因为:hover“子样式”没有像属性那样通过元素继承（例如，如果if你只需设置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荷兰国际集团的一些模板，而不是每次都复制相同的属性）将取决于如何/在哪里/如何，往往在/ etc。你会使用它和（不太不重要的）你是如何（以及如果）计划它是如何定制的（例如，参见@哈利的答案，就像我做的那样，如何制作一个通用的mixin而不是像color-value-hardcoded以上）。

Answer 2

如果您只是希望将变量值设置在一个普通的地方而不是多个地点，则可以创建另一个变量并使用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); 
}