0

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

.label-info 在此文件中以这种 方式定义：

// 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。

4

2 回答 2

2

您尝试做的事情没有太多优势，特别是标签的修饰符类，因为涉及的代码很少。从您的示例中可以看出，代码.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 }
}
于 2012-10-13T11:20:14.747 回答
0

我也想问同样的问题。

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

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

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

            //
            // 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 将在未来得到支持。

于 2013-02-21T14:48:45.437 回答