twitter bootstrap - color - Extendiendo Bootstrap 3 LESS.btn-group no funciona

button bootstrap 5

Question

En definitiva, estoy tratando de lograr los siguientes estilos con MENOS.

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

Tengo el siguiente 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>

Y tengo esto en un archivo LESS con importaciones de Bootstrap 3

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

Al agregar .btn y .btn, el botón predeterminado funciona bien. Pero agregar .btn-group al envoltorio ".filter" no funciona. No puedo entender lo que estoy haciendo mal. Si agrego la clase .btn-group manualmente a la

class="filter btn-group" Funciona.

Answer 1

EDITADO

Si bien no podía pensar en una forma de lograr completamente lo que quería, con algo de ayuda e inspiración de @ seven-phases-max, pude adaptar esa esencia para obtener el resultado deseado.

Para obtener una imagen de cómo funciona, los ''pasos'' son: Primero, trate el selector de botones como .btn.btn-default. Segundo, encuentre todas las instancias del selector .btn-group y reemplácelo con .filter. Luego, finalmente, encuentre todas las instancias de .btn dentro del .filter y reemplácelas con el botón.

Puede lograr esto con extender (disponible en Less v1.4.0 +). Aquí hay un ejemplo simple de menos archivo:

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

Debe asegurarse de que cualquier extensión se coloca después de sus otras importaciones porque la extensión actúa como una búsqueda y reemplazo (no destructivo). Por lo tanto, la primera extensión anterior, por ejemplo, encuentra todas las instancias de .btn dentro de cualquier selector de reglas y hace una copia del selector, reemplazando .btn con el botón.

El resultado resultante permite diseñar el siguiente estilo como un grupo 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. Como se señaló en varios comentarios de seven-phases-max, esto agregará un poco de peso adicional a su salida porque es una búsqueda y reemplazo no destructivos. Agrega alrededor de 9Kb a la salida sin minificar / sin comprimir.
2. No puede usar este tipo de extender las etiquetas para casillas de verificación o botones de radio con el atributo data-toggle="buttons" ya que la BUTTON DATA-API dentro de button.js busca específicamente la clase .btn en lugar de buscar un elemento de botón.