css - 如何在我自己的类定义中包含来自 twitter bootstrap 的标签信息？

Question

使用 twitter-bootstrap，我试图定义我自己的 css 标签类，但出现错误。

.label-info 在 this file 中定义那样:

// Colors
// Only give background-color difference to links (and to simplify, we don't qualifty with `a` but [href] attribute)
.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%); }
  // Success (green)
  &-success           { background-color: @successText; }
  &-success[href]     { background-color: darken(@successText, 10%); }
  // Info (turquoise)
  &-info              { background-color: @infoText; }
  &-info[href]        { background-color: darken(@infoText, 10%); }
  // Inverse (black)
  &-inverse           { background-color: @grayDark; }
  &-inverse[href]     { background-color: darken(@grayDark, 10%); }
}

我想要的在my_label.css.less:

@import "twitter/bootstrap";

.my_label{
    .label;
    .label-info;
}

.label 有效

但是 .label-info 给我一个错误:.label-info is undefined

那么如何在我的类中包含 .label-info 呢？

我正在使用 rails 和 less-rails-boostrap gem。

Answer 1

您尝试做的事情没有太大优势，特别是标签的修饰符类，因为涉及的代码很少。从您的示例中可以看出， .label-info 的代码基本上是

.label {
  &-info              { background-color: @infoText; };
}

如果你真的想将 .label 类与你的新类结合起来，就像你的例子一样，你最好将它与 .label 类组合起来以减少代码，如下所示:

.label,
.label-notice {
  // declarations
}

尽管请记住，这有点否定 Bootstrap 的独特优势和最佳实践之一。

至于自定义类，我的建议是使用与其他修饰符相同的模式添加一个新的语义类，并使用为 .label-info 定义的背景颜色，如下所示:

.label,
.badge {
  // Info (turquoise)
  &-info              { background-color: @infoText; }
  &-info[href]        { background-color: darken(@infoText, 10%); }
  ...

  // Notice (your custom class)
  &-notice            { background-color: @infoText; // extend with your properties here }
}