Question

我正在使用twitter bootstrap中的样式，并对继承有疑问。

我想制作两个标签类，它们从bootstrap继承标签样式。

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

但是，上面会导致LESS解析错误“NameError：.label-important is undefined”，因为.label-important和.label-warning是使用以下引导程序定义的：

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

CSS - LESS类继承

1 个答案: