0

这让我抓狂。

我在 bootstrap v3 中有标签组件。标签有label-danger（红色）、label-success（绿色）等修饰符。需要区分label是否为链接。

我有两个列表，一个有锚作为子元素，另一个没有：

<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%);
    }
  }
}

有谁知道这种情况该怎么办？

4

1 回答 1

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;
        }
    }
}
于 2013-04-22T19:02:30.183 回答