0

我有以下更少的代码：

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:before 中的 @Color 与 Info 或 Menu 中的背景颜色相同，具体取决于 Tooltip 具有的类：“Tooltip Info”或“Tooltip Menu”。

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

我想用LESS做的事情可能吗？

4

2 回答 2

1

我不是 100% 确定你是如何尝试应用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。

注意： 如前所述，这应该有效（如果您将content, width, height, 和添加position到伪元素），但如果我是您，我会修改您的 CSS。div.Tooltip.Info例如，打电话真的有效吗？你能以一种聪明的方式组合一些选择器吗？但我想我没有看到全貌。

在这里，我添加了一个带有生成的 CSS 的 jsfiddle 演示（我只是添加了一些不同的颜色，导致边框在相同颜色的背景上不可见，并为共享:before选择器分配了一些必需的属性，以便显示）：

演示

...

无论如何，像我建议的那样的 mixin 将是一种优雅的方式，可以在多个位置添加具有特定更改的相同元素。

于 2013-07-26T13:10:45.947 回答
1

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

...那么这将起作用（如小提琴所示）：

较少的

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;
}
于 2013-07-26T17:44:46.270 回答