Наследование класса CSS - LESS

Я использую стили из twitter bootstrap и задаюсь вопросом о наследовании.

Я хотел бы сделать два класса ярлыков, которые наследуют стили ярлыков от начальной загрузки.

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

Однако вышеизложенное приведет к ошибке LESS parse "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?

Спасибо заранее.

ОТВЕТЫ

Ответ 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%); } 
}

EDIT (Если вы не хотите переопределять цвета, но используйте 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;
}