Это сводит меня с ума.
У меня есть компонент меток в 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%);
}
}
}
Кто-нибудь знает, что делать в таком случае?
a&
как вlabels.less
? - person Pigueiras   schedule 22.04.2013