0

これは私を夢中にさせています。

ブートストラップ v3 にラベル コンポーネントがあります。ラベルには、label-danger (赤)、label-success (緑) などの修飾子があります。ラベルがリンクかどうかを区別する必要があります。

私は2つのリストを持っています.1つは子要素としてアンカーを持ち、他は持っていません:

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

そして、この部分まではOKです：

#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 に答える