少：根据级别定义颜色(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
}

基本上，我想在@Color N：前将是相同的信息的背景颜色或菜单，这取决于工具提示具有类：“工具提示信息”或“工具提示菜单”。

我试图用变量，但我总是以相同的值结束。

正是我试图做可能事半功倍？

Answer 1:

我不是100％肯定你是如何试图应用before正好......或者您的确切需要的CSS应该是什么。

应用特定父规则格式化的孩子（或伪元素），你可以做一个可重复使用的参数混入 ，这需要的颜色作为参数，设置背景，也增加了与相应的颜色孩子规则（伪元素） （和其他属性）。

也许是这样的：

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

然后，你可以调用每个类的混入：

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选择，以便它能够显示） ：

DEMO

...

无论如何，像我提出一个mixin，会在多个地方特异性改变添加相同元素的优雅的方式。

Answer 2:

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

......那么这将工作（ 如小提琴表演 ）：

减

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

文章来源: Less: Define color according to Class