Question

我的目标是在此轮询http://tsn.thesn.net/poll/962上使用动态文本颜色，这样当没有背景颜色时，文本为深灰色，当绿色背景出现时，文本为白色。

以下是我的背景和文字样式：

.chartlist .item { 
  display: block; 
  padding: 0.4em 4.5em 0.4em 0.5em;
  position: relative; 
  z-index: 2;
  font-weight: bold;
  color: @grayDarker; 
}

.chartlist .index { 
  display: block; 
  position: absolute; 
  top: 0; 
  left: 0; 
  height: 100%; 
  background: @green; 
  text-indent: -9999px; 
  overflow: hidden; 
  line-height: 2em;
 }

我已经在LESS上阅读了相关文档，但是我无法直观地看到语法是如何工作的。非常感谢任何帮助，谢谢。

Answer 1

我会写这样的东西：

.colors(@col){
   color:@col;
}
.colors(@col,@bgcol){
   color:@col;
   background:@bgcol;
}

然后你可以写：

.chartlist .item { 
 /* ... */
  colors(@grayDarker); 
}
.chartlist .index { 
  /* ... */
  colors(white,@green);
}

保护混合物以控制颜色与LESS

1 个答案: