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

【问题标题】：How can i include label-info from twitter boostrap in my own class definition?如何在我自己的类定义中包含来自 twitter bootstrap 的标签信息？
【发布时间】：2012-10-12 22:44:53
【问题描述】：

使用 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。

【问题讨论】：

标签： css ruby-on-rails twitter-bootstrap less

【解决方案1】：

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

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

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

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

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

对于自定义类，我的建议是添加一个新的语义类，使用与其他修饰符相同的模式，并使用为.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 }
}

【讨论】：

【解决方案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.
            //

所以，我认为将来会支持带有命名空间的 mixin。

【讨论】：