МЕНЬШЕ - вернуться к прародителю, если ребенок существует

Это сводит меня с ума.

У меня есть компонент меток в bootstrap v3. Метки имеют модификаторы, такие как метка-опасность (красный цвет), метка-успех (зеленый) и т. д. Необходимо различать, является ли метка ссылкой или нет.

У меня есть два списка, в одном есть якоря как дочерний элемент, а в другом нет:

<ul id="labels1">
    <li>Success</li>
    <li>Danger</li>

<ul id="labels2">
    <li><a href="#">Success</a></li>
    <li><a href="#">Danger</a></li>
</ul>

Далее идет labels.less, который выглядит так:

.label {
  display: inline;
  padding: .25em .6em;
  font-size: 75%;
  font-weight: 500;
  color: #fff;
  line-height: 1;
  vertical-align: middle;
  white-space: nowrap;
  text-align: center;
  background-color: @grayLight;
  border-radius: .25em;

  a,
  a:hover,
  a:focus,
  a&,
  a&:hover,
  a&:focus {
    color: #fff;
    text-decoration: none;
    cursor: pointer;
  }
}

.label-danger {
  background-color: @label-danger-bg;
  a& {
    background-color: darken(@label-danger-bg, 10%);
  }
}
.label-success {
  background-color: @label-success-bg;
  a& {
    background-color: darken(@label-success-bg, 10%);
  }
}

Следующее, что у меня есть мастер-таблица LESS, где я определяю:

#labels1 {
    li {
        .label;
        &:first-child {
            .label-success;
        }
        &:last-child {
            .label-danger;
        }
    }
}

И это нормально до этой части:

#labels2 {
    li {
        a {
            .label;
        }
        &:first-child {
            a {
                .label-success;
            }
        }
        &:last-child {
            a {
                .label-danger;
            }
        }
    }
}

С помощью LESS невозможно сказать, что я стилизую элемент a, поэтому он должен иметь более темный цвет.

Если я сделаю что-то вроде этого:

#labels2 {
    li {
        &:first-child {
            .label;
            .label-success;
        }
        //  etc
    }
}

Он просто будет воспроизводить нормальные цвета (не более темные).

Что я хотел бы сделать, так это найти обходной путь для чего-то, чего не существует в LESS (совпадение прародительского селектора в цепочке):

.label-success {
  background-color: @label-success-bg;
  a {
    && { // go 2 levels up and style the .label-success 
         // if LESS can dig to this rule - eg. if there technically 
         // exists an anchor inside the li.
        background-color: darken(@label-success-bg, 10%);
    }
  }
}

Кто-нибудь знает, что делать в таком случае?


person Fowowski    schedule 22.04.2013    source источник
comment
Вы просите a& как в labels.less?   -  person Pigueiras    schedule 22.04.2013


Ответы (1)


Я не верю, что вам нужен "&" в вашем правиле. Так должно быть:

.label-danger {
  background-color: @label-danger-bg;
  a {
    background-color: darken(@label-danger-bg, 10%);
  }
}
.label-success {
  background-color: @label-success-bg;
  a {
    background-color: darken(@label-success-bg, 10%);
  }
}

Тогда ваши правила для #labels1 должны работать для обоих:

#labels1, #labels2 {
    li {
        .label;
        &:first-child {
            .label-success;
        }
        &:last-child {
            .label-danger;
        }
    }
}
person Hai Nguyen    schedule 22.04.2013