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

时间:2012-10-05 14:39:04

标签: css less mixins

我的目标是在此轮询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上阅读了相关文档,但是我无法直观地看到语法是如何工作的。非常感谢任何帮助,谢谢。

1 个答案:

答案 0 :(得分:0)

我会写这样的东西:

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

然后你可以写:

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