css - 使用 LESS 控制颜色的受保护的 mixin

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);
}