15

我正在使用来自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？

提前致谢。

4

1 回答 1

11

我认为你只能继承.labelwhich 应该给出.label-new-importantand .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;
}
于 2012-05-08T19:32:44.860 回答