减:根据类别定义颜色 [英] Less: Define color according to Class

问题描述

我有以下更少的代码:

div.Tooltip {   
  cursor: default;  

  &.Info {background-color: #808080;} // Info

  &.Menu {background-color: #606060;} // Menu

  &.N:before {
    border-top: 6px solid @Color;
    bottom: -6px;
  } // N:BEFORE
}

基本上，我希望N:中的@Color与信息或菜单中的背景色相同，具体取决于工具提示具有的类别:工具提示信息"或工具提示菜单".

Basically, I would like @Color in N:before would be the same as the background-color in Info or Menu, depending on which class the Tooltip has: "Tooltip Info" or "Tooltip Menu".

我尝试使用变量，但最终总是得到相同的值.

I tried to use variables but I always end up with the same values.

我想用LESS做些什么吗?

Is what I am trying to do possible with LESS?

推荐答案

如果工具提示本身没有边框...

...然后这将起作用(如小提琴所示):

很少

div.Tooltip {   
  cursor: default;  

  &.Info {
    background-color: #808080;
    border-top-color: #808080;
  } // Info

  &.Menu {
    background-color: #606060;
    border-top-color: #606060;
  } // Menu

  &.N:before {
    border-top: 6px solid transparent;
    //Firefox 22 bug did not allow inherit with border-top so I'm overriding
    border-top-color: inherit; 
    bottom: -6px;
  } // N:BEFORE
}

CSS输出

div.Tooltip {
  cursor: default;
}
div.Tooltip.Info {
  background-color: #808080;
  border-top-color: #808080;
}
div.Tooltip.Menu {
  background-color: #606060;
  border-top-color: #606060;
}
div.Tooltip.N:before {
  border-top: 6px solid transparent;
  border-top-color: inherit; /* for Firefox 22 bug */
  bottom: -6px;
}

**如果要定义的工具提示有很多类型"，请进行混合并使用:

**If you have a lot of "types" of Tooltips to define, then make a mixin and use that:

.buildTooltip(@type, @color) {
  &.@{type} {
    background-color: @color;
    border-top-color: @color;
  }
}

div.Tooltip {   
  cursor: default;  

  .buildTooltip(Info, #808080);
  .buildTooltip(Menu, #606060);
  .buildTooltip(Blahhhh, #ffffff);
  .buildTooltip(Mooooore, #ff0000);

  &.N:before {
    border-top: 6px solid transparent;
    //Firefox bug did not allow inherit with border-top
    border-top-color: inherit; 
    bottom: -6px;
  } // N:BEFORE
}

CSS输出(仅显示添加的类型"，与上面相同)

div.Tooltip.Blahhhh {
  background-color: #ffffff;
  border-top-color: #ffffff;
}
div.Tooltip.Mooooore {
  background-color: #ff0000;
  border-top-color: #ff0000;
}

这篇关于减:根据类别定义颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！