CSS - LESS类继承

Question

我正在使用来自twitter bootstrap的样式并且有关于继承的问题.

我想制作两个标签类,它们继承了bootstrap中的标签样式.

.label-new {
    .label; .label-important;
}
.label-updated {
    .label; .label-warning;
}

但是,上面会导致LESS解析错误"NameError:.label-important is undefined",因为.label-important和.label-warning是在bootstrap中使用以下内容定义的:

.label,
.badge {
  // Important (red)
  &-important         { background-color: @errorText; }
  &-important[href]   { background-color: darken(@errorText, 10%); }
  // Warnings (orange)
  &-warning           { background-color: @orange; }
  &-warning[href]     { background-color: darken(@orange, 10%); }
}

是否有任何特殊的语法来继承.label-important/warning？

提前致谢.

Answer 1

我认为你只能继承.label应该给予的东西.label-new-important和.label-new-warning(和等价物updated).如果这不是您想要的,并且您想要新添加的扩展,您可能需要再次直接定义颜色.label以隔离并定义您想要的内容.像这样:

.label { 
  // New (red) 
  &-new           { background-color: @errorText; } 
  &-new[href]     { background-color: darken(@errorText, 10%); } 
  // Updated (orange) 
  &-updated       { background-color: @orange; } 
  &-updated[href] { background-color: darken(@orange, 10%); } 
} 

编辑(如果您不想重新定义颜色但使用mixin)

为避免重新定义颜色,您需要更改原始定义,并执行以下操作:

首先,删除原始.label和.badge定义,然后,更明确地定义它们,如下所示:

.label-important,
.badge-important {
  // Important (red)
  { background-color: @errorText; }
  { background-color: darken(@errorText, 10%); }
}

.label-warning,
.badge-warning {
  // Warnings (orange)
  { background-color: @orange; }
  { background-color: darken(@orange, 10%); }
}

.label-new {
    .label-important;
}

.label-updated {
    .label-warning;
}