參考嵌套的規則，當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

回答

相關問題