擴展引導程序3 LESS .btn-group不起作用

Question

最終，我試圖用LESS完成以下樣式。

<div class="filter btn-group"> 
    <button class="btn btn-default" type="button" data-filter="*">show all</button> 
    <button class="btn btn-default" type="button" data-filter=".cd">CD</button> 
    <button class="btn btn-default" type="button" data-filter=".vinyl">Vinyl</button>  
</div> 

我有以下的HTML

<div class="filter"> 
    <button type="button" data-filter="*">show all</button> 
    <button type="button" data-filter=".cd">CD</button> 
    <button type="button" data-filter=".vinyl">Vinyl</button> 
</div> 

而且我有這樣的一個LESS文件，引導3

.filter { 
    .btn-group; 
    button { 
     .btn; 
     .btn-default; 
    } 
} 

進口當添加.btn和.btn默認的按鈕工作得很好。但將.btn-group添加到包裝器「.filter」不起作用。我無法弄清楚我做錯了什麼。如果我手動將類.btn-group添加到

class="filter btn-group"

它可以工作。

Answer 1

編輯

雖然我不能想辦法充分完成你想要的東西，有一些幫助和啓發來自@七階段-MAX，我能夠適應那個要點，讓您的預期的結果。

爲了得到它如何工作的圖片，'步驟'是：首先，將按鈕選擇器視爲.btn.btn-default。其次，找到.btn-group選擇器的所有實例，並用.filter替換它。然後，最後，在.filter中找到.btn的所有實例，並用按鈕替換它們。

您可以通過擴展完成此操作（可在Less v1.4.0 +中使用）。這裏是少文件的一個簡單的例子：

@import "bootstrap.less"; 
button { 
    .btn-default(); 
    &:extend(.btn, .btn.btn-default all); 
} 
.filter:extend(.btn-group all) {} 
.filter > button:extend(.btn-group > .btn all) {} 
.filter button + button:extend(.btn-group .btn + .btn all) {} 

你需要確保任何延伸放置你的其他的進口後，因爲像擴展（非破壞性的）搜索&替換所有行爲。因此，例如，上面的第一個擴展找到了任何規則選擇器中的.btn的所有實例，並且將選擇器的副本複製，並用按鈕替換.btn。

所產生的輸出允許以下要樣式象BTN-組：

<div class="filter"> 
    <button type="button">BUTTON ONLY</button> 
    <button type="button">BUTTON ONLY</button> 
    <button type="button">BUTTON ONLY</button> 
</div> 

CAVEATS

1. 如七相-MAX在若干評論指出的，這是會爲你的輸出增加一點額外的權重，因爲它是一種非破壞性的搜索和替換。它增加了大約9Kb的到未壓縮/未壓縮的輸出。
2. 你不能使用這種類型的擴展標籤爲複選框或單選按鈕與data-toggle="buttons"屬性作爲BUTTON DATA-API裏面button.js是專門尋找類.btn與尋找一個按鈕元素。