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:before中的@Color与Info或Menu中的背景色相同，这取决于工具提示的类别：“工具提示信息”或“工具提示菜单”

我试着使用变量，但结果总是一样的

---

我想用更少的钱做的事情可能吗？

我不能100%确定您在之前是如何尝试应用

。。。或者你想要的CSS应该是什么

要将特定于父规则的格式应用于子规则（或伪元素），可以制作一个可重用的参数化mixin，该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;
}

这将把不同的颜色伪元素应用到分配给
工具提示的不同类中

注意：
如前所述，这应该是可行的（如果您将
内容
、
宽度
、
高度
、以及
位置
添加到伪元素中），但如果我是您，我会修改您的CSS。例如，调用
div.Tooltip.Info
真的有效吗？你能以一种智能的方式组合一些选择器吗？但我想我看不到全部情况

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



无论如何，像我建议的那样的混合是一种优雅的方式，可以在多个位置添加相同元素并进行特定修改。
如果工具提示本身没有边框。。。
…那么这就行了（）：

更少

div.Tooltip{
游标：默认值；
&.Info{
背景色：#808080；
边框顶部颜色：#808080；
}//信息
&.菜单{
背景色：#606060；
边框顶部颜色：#606060；
}//菜单
&N:以前{
边框顶部：6px实心透明；
//Firefox 22 bug不允许使用border top继承，因此我将覆盖
边框顶部颜色：继承；
底部：-6px；
}//N:以前
}

CSS输出

div.Tooltip{
游标：默认值；
}
div.Tooltip.Info{
背景色：#808080；
边框顶部颜色：#808080；
}
div.Tooltip.Menu{
背景色：#606060；
边框顶部颜色：#606060；
}
div.Tooltip.N:之前{
边框顶部：6px实心透明；
边框顶部颜色：继承；/*用于Firefox 22错误*/
底部：-6px；
}

**如果有很多“类型”的工具提示需要定义，那么制作一个mixin并使用它：

.buildTooltip（@type，@color）{
&.@{type}{
背景色：@色；
边框顶色：@color；
}
}
分区工具提示{
游标：默认值；
.buildTooltip（信息，#808080）；
.buildTooltip（菜单#606060）；
.buildTooltip（废话，#ffffff）；
.buildTooltip（moooore，#ff0000）；
&N:以前{
边框顶部：6px实心透明；
//Firefox错误不允许使用边框顶部进行继承
边框顶部颜色：继承；
底部：-6px；
}//N:以前
}

CSS输出（仅显示添加的“类型”，其他与上面相同）

div.Tooltip.blahh{
背景色：#ffffff；
边框顶部颜色：#ffffff；
}
div.Tooltip.moooore{
背景色：#ff0000；
边框顶部颜色：#ff0000；
}