Prefisso tutti i selettori per il bootstrap di Twitter in meno

Question

Vorrei iniziare a imparare Twitter Bootstrap e unirlo al mio sito (a partire dagli elementi del modulo) ma interromperà il resto del sito se lo includo così com'è.

mi piacerebbe prefisso tutti i selettori in modo che io possa aggiungere gradualmente il contenuto che è bootstrap-stile in questo modo: <div class="bootstrap"><!-- bootstrap styled stuff here --></div>

Perché io sto solo cominciando a imparare, io non so davvero che cosa è possibile con less. Ho fatto manualmente il prefisso del selettore, ma sono curioso di sapere se ci sarebbe un modo per farlo con less in modo che io possa impararlo modificando bootstrap mentre lo isola ancora in un contenitore di bootstrap richiesto.

Per ora, devo aggiungere il prefisso in un secondo passaggio dopo aver compilato i file meno.

Grazie per eventuali suggerimenti!

Answer 1

È possibile modificare il file bootstrap.less e incapsulare tutto in qualcosa di simile:

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

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

    [...] 

} 

Aggiornamento:

Poiché i file bootstrap usa il meno & operatore, ad esempio:

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

La compilazione del codice precedente si concluderà con regole semanticamente sbagliate e non precedute da .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; 
} 

Per fissare che utilizzano i seguenti per compilare bootstrap:

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

Ora le righe di cui sopra saranno compilati 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

Questo in realtà non affronta la questione del conflitti di denominazione. Mette una classe specifica come selettore prima di tutte le classi CSS di bootstrap. Quindi per utilizzarli è necessario avvolgere il codice HTML in un contenitore (come un DIV) con una classe di quel nome specifico, quindi il CSS di bootstrap si applicherà solo all'interno di quel DIV. Ci sono alcuni problemi con questo.

Un problema è che il CSS Bootstrap contiene le definizioni per BODY e HTML che non saranno applicabili se si mette un selettore di fronte a esse.

Un altro problema è quando, nel CSS personalizzato, si definiscono alcuni stili una classe Bootstrap come ".dropdown" o ".table". Potresti definire aspetti dello stile che non sono definiti da Bootstrap, e potresti sovrascrivere gli stili Bootstrap o metterli a posto. Ad esempio, se Bootstrap definisce il padding sulla classe ".table" e definisci il margine sulla tua classe ".table", essi verranno combinati secondo le regole di priorità CSS quando viene eseguito il rendering della pagina. Anche se metti una classe di selettori personalizzati specifica davanti alla classe ".table" di Bootstrap, e una classe di selettori diversa davanti alla tua classe ".table", continueranno a combinare e interagire.

L'utilizzo di una classe di selettori come questa non è realmente un "namespace" nel vero senso della parola, e non isola completamente il CSS. Il modo migliore per ottenere un vero isolamento è il prefisso di ogni nome di classe con una stringa di prefisso univoca.

Answer 3

per evitare i problemi menzionati nella risposta di Periklis: creare il proprio prefixed-bootstrap.less che ri-compila il compilatibootstrap.css in: comandi

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

Non c'è bisogno di sed poi. Le osservazioni menzionate nella risposta di Lars Nielsen sono ovviamente ancora valide.