Question

我正在尝试保持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;
  }
}

当然，最后一段代码在第六行中出现了一个简单的：语法错误。

Answer 1

答案是“不”。目前，您不能混合选择器字符串中包含元素的选择器。虽然这可能是LESS的限制，但是如果tr应该是mixin或者选择器，则很难区分。

真正的问题是bootstrap无法使用嵌套来代替其部分代码。例如，以下内容来自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的不正确嵌套的东西。如果您不需要混音，请不要纠正它。

Answer 2

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

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

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

我必须在correction.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%);
    }
  }
}

在LESS中mixin时引用嵌套规则

2 个答案: