参考嵌套的规则，当mixin在LESS

我想保持我的HTML干净，并使用mixins而不是非语义引导类。参考嵌套的规则，当mixin在LESS

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

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

这工作得很好，除了适用于下。表元素的规则，e.g：

.table tbody tr

有没有去，我可以混入在.index tbody tr.table tbody tr？

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

    tbody tr { 
    .table tbody tr; 
    } 
}

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

来源

2013-02-18 Leito

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

real问题是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的嵌套有多少不正确。如果你不需要混入，请不要纠正它。

来源

2013-02-19 03:28:04 ScottS

谢谢ScottS，很好的回答！我会按照你的意见，并创建一个更正。到目前为止，我只需要它在桌子上，所以它不应该那么糟糕。 – Leito 2013-02-19 14:45:09

基于斯科特回答的最终解决方案是：

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

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

我不得不在correction.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-19 16:36:12 Leito

参考嵌套的规则，当mixin在LESS

回答

相关问题