Prefijo de todos los selectores para twitter bootstrap en menos

Question

Me gustaría comenzar a aprender Twitter Bootstrap y fusionarlo en mi sitio (comenzando con los elementos del formulario) pero rompe el resto del sitio si lo incluyo como está.

me gustaría prefijar todos los selectores de modo que pueda añadir poco a poco el contenido que ha de arranque-estilo, así: <div class="bootstrap"><!-- bootstrap styled stuff here --></div>

Porque sólo estoy empezando a aprender, yo realmente no sé lo que es posible con less. He hecho manualmente el prefijo del selector, pero tengo curiosidad por saber si habría una manera de hacerlo con less para que pueda aprenderlo modificando el bootstrap mientras aún lo aíslas en un contenedor de bootstrap requerido.

Por ahora, tengo que agregar el prefijo en un segundo paso después de compilar menos archivos.

¡Gracias por cualquier sugerencia!

Answer 1

Puede editar el archivo bootstrap.less y encapsular todo en algo como esto:

.bootstrap { 
    // CSS Reset 
    @import "reset.less"; 

    // Core variables and mixins 
    @import "variables.less"; // Modify this for custom colors, font-sizes, etc 

    [...] 

} 

Actualización:

Dado que los archivos de arranque utiliza menos & operador, por ejemplo:

// list-group.less (bootstrap 3.0.0) 
.list-group-item { 
    [...] 
    a& { 
     [...] 
    } 
} 

La compilación del código anterior terminará con reglas que son semánticamente incorrectas y no tienen el prefijo .bootstrap:

a.bootstrap .list-group-item { 
    color: #555555; 
} 
a.bootstrap .list-group-item .list-group-item-heading { 
    color: #333333; 
} 
a.bootstrap .list-group-item:hover, 
a.bootstrap .list-group-item:focus { 
    text-decoration: none; 
    background-color: #ecf0f1; 
} 

Para fijar que usar lo siguiente para compilar archivos de inicio:

$ lessc bootstrap.less | sed -e 's/\(.\+\).bootstrap \(.\+\)/.bootstrap \1\2/g' > output.css 

Ahora las líneas anteriores serán compilados a:

.bootstrap a .list-group-item { 
    color: #555555; 
} 
.bootstrap a .list-group-item .list-group-item-heading { 
    color: #333333; 
} 
.bootstrap a .list-group-item:hover, 
.bootstrap a .list-group-item:focus { 
    text-decoration: none; 
    background-color: #f5f5f5; 
} 

Answer 2

Esto en realidad no aborda la cuestión de nombrando conflictos. Pone una clase específica como un selector antes de todas las clases de arranque de CSS. Entonces para usarlos debes envolver tu HTML dentro de un contenedor (como un DIV) con una clase de ese nombre específico, entonces el bootstrap CSS solo se aplicará dentro de ese DIV. Hay algunos problemas con esto.

Un problema es que Bootstrap CSS contiene definiciones para BODY y HTML que no se aplicarán si coloca un selector delante de ellas.

Otro problema es cuando, en su CSS personalizado, define algunos estilos de una clase Bootstrap como ".downdown" o ".table". Puede definir aspectos del estilo que no estén definidos por Bootstrap, y puede anular los estilos de Bootstrap o desordenarlos. Por ejemplo, si Bootstrap define el relleno en la clase ".table" y usted define el margen en su propia clase ".table", entonces se combinarán según las reglas de prioridad de CSS cuando se represente la página. Incluso si coloca una clase específica de selector personalizado frente a la clase ".table" de Bootstrap, y una clase de selector diferente frente a su propia clase ".table", aún así se combinarán e interactuarán.

Usar una clase de selector como esta no es realmente un "espacio de nombres" en el verdadero sentido, y no aísla completamente el CSS. La mejor manera de lograr un aislamiento real es prefijar cada nombre de clase con una cadena de prefijo única.

Answer 3

Para evitar los problemas mencionados en la respuesta de Periklis: crear su propia prefixed-bootstrap.less que re-compila el compilados en bootstrap.css: comandos

.bootstrap { 
    @import (less) 'dist/css/bootstrap.css'; 
    @import (less) 'dist/css/bootstrap-theme.css'; /* optional */ 
} 

hay necesidad de sed a continuación. Las observaciones mencionadas en la respuesta de Lars Nielsen son, por supuesto, válidas.