减:根据类定义颜色

时间:2013-07-26 10:27:23

标签: less

我有以下少量代码:

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:之前与Info或Menu中的背景颜色相同,具体取决于Tooltip具有哪个类:“Tooltip Info”或“Tooltip Menu”。

我尝试使用变量,但我总是以相同的值结束。

我想用LESS做什么呢?

2 个答案:

答案 0 :(得分:1)

我不是百分百确定你是如何准确地应用before的......或者你想要的CSS应该是什么。

要将特定于父规则的格式应用于子(或伪元素),您可以创建一个可重复使用的参数 mixin ,它将颜色作为参数,设置背景并添加具有适当颜色(和其他属性)的子规则(伪元素)。

也许是这样的:

.before(@color){
    background-color: @color;
    &:before {
      border-top: 6px solid @color;
      bottom: -6px;
    }
}

然后你可以为每个班级调用mixin:

div.Tooltip {   
  cursor: default;  
  &.Info {
    .before(#808080);
  } // Info

  &.Menu {
    .before(#606060);
  } // Menu
}

,CSS输出将是:

div.Tooltip {
  cursor: default;
}
div.Tooltip.Info {
  background-color: #808080;
}
div.Tooltip.Info:before {
  border-top: 6px solid #808080;
  bottom: -6px;
}
div.Tooltip.Menu {
  background-color: #606060;
}
div.Tooltip.Menu:before {
  border-top: 6px solid #606060;
  bottom: -6px;
}

现在,这将把不同的颜色伪元素应用于分配给Tooltip的不同类。

注意: 如上所述,这应该有用(如果你将contentwidthheightposition添加到伪元素中,但如果我是你,我会修改你的CSS。例如,调用div.Tooltip.Info真的有效吗?你能以聪明的方式结合一些选择器吗?但我想我不会看到整体情况。

在这里,我添加了一个带有生成的CSS的jsfiddle演示(我刚添加了一些不同的颜色,因为边框不会在同一颜色的背景上显示,并为共享的:before分配了一些必需的属性选择器,以便显示):

DEMO

...

无论如何,像我建议的那样,mixin将是一种优雅的方式,可以在多个地方添加相同的元素并进行特定的更改。

答案 1 :(得分:1)

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

...然后这将有效(as the fiddle shows):

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

**如果你要定义很多“类型”的工具提示,那就制作一个mixin并使用它:

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