Extension Bootstrap 3 LESS .btn-groupe ne fonctionne pas

Question

En fin de compte j'essaie d'accomplir les styles suivants avec MOINS.

<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> 

je le code HTML suivant

<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> 

Et je cela dans un fichier moins avec les importations de Bootstrap 3

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

Lors de l'ajout .btn et .btn par défaut à la le bouton fonctionne très bien. Mais ajouter .btn-group à l'encapsuleur ".filter" ne fonctionne pas. Je ne peux pas comprendre ce que je fais mal. Si j'ajoute manuellement la classe .btn-group au

class="filter btn-group"

Cela fonctionne.

Answer 1

ÉDITÉE

Bien que je ne pouvais pas penser à une façon d'accomplir pleinement ce que vous vouliez, avec un peu d'aide et d'inspiration de @ sept phases-max, j'ai pu adapter ce point essentiel pour obtenir votre résultat désiré. Pour obtenir une image de son fonctionnement, les étapes sont: Premièrement, traitez le sélecteur de boutons comme .btn.btn-default. Ensuite, trouvez toutes les instances du sélecteur .btn-group et remplacez-le par .filter. Ensuite, enfin, trouvez toutes les instances de .btn dans le .filter et remplacez-les par un bouton.

Vous pouvez accomplir ceci avec extend (disponible dans Less v1.4.0 +). Voici un exemple simple du fichier moins:

@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) {} 

Vous devez vous assurer que tout Extend est placé après vos autres importations, car l'étendue tous les actes comme (non destructive) recherche & remplacer. Ainsi, la première extension ci-dessus, par exemple, trouve toutes les instances de .btn dans n'importe quel sélecteur de règles et fait une copie du sélecteur, en remplaçant .btn par le bouton.

La sortie résultante permet ce qui suit pour être de style comme un BTN-groupe:

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

CAVEATS

1. Comme indiqué dans plusieurs commentaires par sept phases-max, c'est va ajouter un peu de poids supplémentaire à votre production parce que c'est une recherche non destructive et remplacer. Il ajoute environ 9 Ko à la sortie non-compressée/non compressée.
2. Vous ne pouvez pas utiliser ce type d'extension pour les cases à cocher ou les boutons radio avec l'attribut data-toggle="buttons" comme bouton BUTTON DATA-API inside.js recherche spécifiquement la classe .btn par rapport à la recherche d'un élément de bouton.