racchiude le definizioni di css .less in uno spazio dei nomi

Question

Volevo utilizzare i CSS di bootstrap di Twitter solo in un elemento specifico nella mia pagina web.

Ho provato a farlo come nel codice qui sotto. Ma dopo averlo compilato in un file css non è stato emesso nulla. Se ho spostato @import all'esterno di #my_div, ho ottenuto tutte le definizioni CSS per Twitter Boostrap.

#my_div { 
    @import "../twitter_bootstrap/lib/bootstrap.less"; 
} 

Come posso namespace un file less css?

Answer 1

La documentazione di MENO ha una sezione su namespaces.

Così si potrebbe definire il tuo lib in un documento separato:

#ns { 
    .twitter() { 
    // Instructions to be used later 
    // Nothing will appear in compiled CSS except if called later (because of parenthesis) 
    } 
} 

importare questo file all'inizio del file CSS da compilare e utilizzare le seguenti istruzioni:

#my_div { 
    #ns > .twitter; 
} 

Answer 2

Ecco come L'ho fatto. Questo avviene nella directory principale della cartella bootstrap che viene scaricata o clonata da git.

## ./less/namespace.css (New file) 

#ns { 
    .twitter() { 
    @import "less/bootstrap.less"; 
    } 
} 

## ./style.less 

@import "less/namespace.less"; 

.namespace { 
    #ns > .twitter; 
} 

Quindi eseguire meno style.less> style.css

Answer 3

non sto usando less sul sito dal vivo, né sono manualmente facendo la compilazione in modo da questo è una specie di versione "semplice". Non è automatico come gli altri, ma può essere applicato ad alcuni utenti.

1. Modifica bootstrap.css/bootstrap-responsive.css

   .tb { 
       // copy/paste the entire bootstrap.css 
   } 
   

2. Ricompilate con meno o utilizzare un online meno compilatore - http://winless.org/online-less-compiler

3. Modificare il file ora-compilato e cambiare body {} dichiarazioni CSS per tb {}.

4. Utilizzare il nuovo file CSS.

5. posto sul suo sito web "bootstrap" all'interno di un <div class='tb'></div>

Answer 4

Ecco come ho fatto, sulla base delle majgis GitHub forcella sopra:

bootstrap-ns.less:

@import "namespace.less" 
.bs { 
    #ns > .twitter; 
    } 

namespace.less:

#ns { 
    .twitter(){ 
    @import "bootstrap.less"; 
    } 
} 

Quindi fai riferimento a bootstrap-ns.less nella tua pagina html. Questo è stato testato con dotLESS.

Answer 5

se si ha il controllo sui parametri di compilazione è sufficiente impostare strictImports su falso e il lavoro come previsto per tutto dovrebbe andare bene. considerare l'acquisto di less-strictimports o questo numero issue.