0

我试图保持我的 HTML 干净，并使用 mixins 而不是非语义引导类。

我所有的“索引”表都应该有 .table 和 .table-hover。

table.index {
  .table;
  .table-hover;
}

这很好用，除了应用于 .table 下的元素的规则，例如：

.table tbody tr

有没有我可以混入.table tbody tr的地方.index tbody tr？

table.index {
  .table;
  .table-hover;

  tbody tr {
   .table tbody tr;
  }
}

当然，最后一段代码失败了，原因很简单：第六行的语法错误。

4

2 回答 2

2

答案是不。” 目前，您不能混合在选择器字符串中有元素的选择器。虽然这可能是 LESS 的限制，但很难区分 atr应该是 mixin 还是选择器。

真正的问题是引导程序未能对其部分代码使用嵌套。例如，以下来自tables.less（截至 2013 年 2 月 18 日）：

.table tbody tr {
  &.success > td {
    background-color: @successBackground;
  }
  &.error > td {
    background-color: @errorBackground;
  }
  &.warning > td {
    background-color: @warningBackground;
  }
  &.info > td {
    background-color: @infoBackground;
  }
}

如果它是这样构造.table的（注意和之间的额外嵌套括号tbody）......

.table { 
   tbody tr {
      &.success > td {
        background-color: red;
      }
      &.error > td {
        background-color: blue;
      }
      &.warning > td {
        background-color: cyan;
      }
      &.info > td {
        background-color: yellow;
      }
   }
}

...然后它会混合到你的.index就好了。所以要得到你想要的，你需要将引导代码“更正”到上面，确保所有元素都嵌套在一个.table调用中；其他未嵌套的选择器调用也需要更正。您可以执行类似corrections.less在 之后加载的文件之类的操作bootstrap.less，这样，如果引导程序更新，您就不会丢失更正。然后，当它更新时，您需要进入并检查您的更正是否需要更新（或消除，如果引导程序自己解决问题）。

您需要复制和更正多少都取决于您想要用作 mixin 的错误嵌套的数量。如果您不需要混合，请不要费心纠正它。

于 2013-02-19T03:28:04.817 回答
0

基于 ScottS 答案的最终解决方案是：

@import "twitter/bootstrap/bootstrap";
...
@import "corrections";

.index {
  .table;
  .table-hover;
}

我不得不在corrections.less 中再次导入variables.less（它最初是在bootstrap.less 中导入的，但在corrections.less 中不可用）。请注意，导入时不需要 .less 扩展名。

//corrections.less

@import "twitter/bootstrap/variables.less";

.table {
  tbody tr {
    &.success > td {
      background-color: @successBackground;
    }
    &.error > td {
      background-color: @errorBackground;
    }
    &.warning > td {
      background-color: @warningBackground;
    }
    &.info > td {
      background-color: @infoBackground;
    }
  }
}
.table-hover {
  tbody tr {
    &.success:hover > td {
      background-color: darken(@successBackground, 5%);
    }
    &.error:hover > td {
      background-color: darken(@errorBackground, 5%);
    }
    &.warning:hover > td {
      background-color: darken(@warningBackground, 5%);
    }
    &.info:hover > td {
      background-color: darken(@infoBackground, 5%);
    }
  }
}
于 2013-02-19T16:36:12.187 回答