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 works

但是.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 }
}

Answer 2

我也想问同样的问题。

我有一个想法来解决这个问题： 将bootstrap.css更改为bootstrap.less 并导入它，然后就可以使用了 .label和.label-info以及所有其他类。

我希望将来less可以支持这个“功能”。

我在less-1.3.3.js搜索了'mixin'，发现了这个：

            //
            // A Mixin call, with an optional argument list
            //
            //     #mixins > .square(#fff);
            //     .rounded(4px, black);
            //     .button;
            //
            // The `while` loop is there because mixins can be
            // namespaced, but we only support the child and descendant
            // selector for now.
            //

所以，我认为mixins with namespace将来会得到支持。

如何在我自己的类定义中包含来自twitter bootstrap的label-info？

2 个答案: