Less and Bootstrap: come usare una class span3 (o spanX ) come mixin?

È ansible aggiungere la class span3 in un mixin per evitare di inserirlo in ogni elemento del mio HTML? Qualcosa di simile a:

 .myclass { .span3; // other rules... } 

MODIFICARE

Mi scuso, ho dimenticato di specificare un dettaglio importante: span3 è una class standard di Bootstrap. Non ho trovato la sua definizione in nessun file del framework Bootstrap.

Nuova risposta (richiede MENO 1.4.0)

Ciò che realmente desideri è qualcosa che si chiama estendere nella terminologia LESS e SASS. Ad esempio, vuoi un elemento HTML (solo un esempio) …

 

… per comportarsi come se avesse una class span3 da bootstrap aggiunta ad essa, ma senza aggiungere effettivamente quella class nell’HTML. Questo può essere fatto in LESS 1.4.0 usando :extend() , ma ancora non facilmente, principalmente a causa della generazione di classi dinamiche di bootstrap che non verrà rilevata da :extend() .

Ecco un esempio. Assumi questo codice LESS iniziale ( non le classi .span3 generate dynamicmente come fa bootstrap):

 .span3 { width: 150px; } .someClass .span3 { font-size: 12px; } .someOtherClass.span3 { background: blue; } 

Si aggiunge questo codice LESS in 1.4.0:

 .myclass { &:extend(.span3); } 

Che produce questo CSS:

 .span3, .myclass { width: 150px; } .someClass .span3 { font-size: 12px; } .someOtherClass.span3 { background: blue; } 

NOTA come non ha esteso automaticamente le altre istanze di .span3 . Questo è diverso da SASS , ma significa solo che devi essere un po ‘più esplicito nell’estensione. Questo ha il vantaggio di evitare un eccesso eccessivo di codice CSS.

Per estendere completamente, è sufficiente aggiungere la parola chiave all in extend() (questo è aggiornato dal mio codice originale, poiché non ero a conoscenza dell’opzione all ):

 .myclass { &:extend(.span3 all); } 

Che produce questo:

 .span3, .myclass { width: 150px; } .someClass .span3, .someClass .myclass { font-size: 12px; } .someOtherClass.span3, .someOtherClass.myclass { background: blue; } 

Ciò rende la tua .myclass completamente equivalente (nel mio esempio) alla class .span3 . Ciò significa che nel tuo caso, tuttavia, è necessario ridefinire qualsiasi generazione dynamic di classi di bootstrap per essere non dinamiche. Qualcosa come questo:

 .span3 { .span(3); } 

Questo è così :extend(.span3) troverà una class hard coded da estendere a. Questo dovrebbe essere fatto per ogni stringa di selettore che utilizza dynamicmente [email protected]{index} per aggiungere il .span3 .

Risposta originale

Questa risposta presuppone che tu abbia desiderato mescolare le proprietà di una class generata dynamicmente (questo è quello che pensavo fosse il tuo problema).

Ok, credo di aver scoperto il tuo problema. Prima di tutto, bootstrap definisce la serie di classi mixins.less file mixins.less , quindi ovviamente devi essere sicuro di averlo incluso nel tuo caricamento bootstrap. Tuttavia, suppongo sia un dato di fatto che ce ne siano già inclusi.

Problema principale

Il problema principale è come ora bootstrap li sta generando, attraverso un nome di class dinamico in un loop. Questo è il ciclo che definisce la serie .spanX :

 .spanX (@index) when (@index > 0) { [email protected]{index} { .span(@index); } .spanX(@index - 1); } .spanX (0) {} 

Attualmente, poiché il nome della class stesso viene generato dynamicmente , non può essere utilizzato come nome di mixin. Non so se questo è un bug o semplicemente una limitazione di LESS, ma so che al momento attuale della scrittura, qualsiasi nome di class generato dynamicmente non funziona come un nome mixin. Pertanto, .span3 potrebbe trovarsi nel codice CSS da inserire come class nel codice HTML, ma non è direttamente disponibile per l’accesso per scopi di mixaggio.

La correzione

Tuttavia, a causa di come hanno strutturato il codice, puoi comunque ottenere ciò che ti serve, perché come puoi vedere sopra nel codice del ciclo, usano un vero mixin stesso per definire il codice per le classi .spanX . Pertanto, dovresti essere in grado di farlo:

 .myclass { .span(3); // other rules... } 

Il .span(3) è ciò che il loop sta usando per popolare la class .span3 , quindi chiamarlo per le tue classi darà lo stesso codice che ha .span3 . Specificamente bootstrap ha questo definito in mixins.less per quel mixin:

 .span (@columns) { width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)); *width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%); } 

Quindi otterrai le proprietà di width per .span3 nella tua .myclass .

Questo è facile da realizzare con Less.js, ma la vera domanda è: “Devo mischiare le classi della griglia strutturale con le mie classi non strutturali?”

E la risposta è no.

Questa è una ctriggers idea, il vantaggio di un sistema a griglia è che crea una separazione di preoccupazioni tra lo stile strutturale e altri stili. Non sto dicendo “non dovrebbe mai, mai, mai essere fatto”. Ma in generale, non dovrebbe. Non mi piace nemmeno vederlo:

  

Dove span3 trova nello stesso div della class .sidebar . Il problema con questo è che ora la sidebar non è solo “fluttuante” all’interno di una colonna della griglia, è diventata parte della griglia – che (in generale) rende ancora più difficile mantenere i tuoi stili a causa dei workaround che hai bisogno di creare per forzare questo tipo di stile per essere reattivo.

Beh, puoi farlo ma devi prima definire .somethign , in questo esempio lo farò font-wight: bold; e font-size 20px . Come puoi vedere in seconda class .body Non dovevo definire il font-weight: bold; e font-size: 20px; Ho appena aggiunto .something in esso

 .something { font-weight: bold; font-size: 20px; } .body { background-color: gray; border: ridge 2px black; .something } 

Puoi vedere un esempio qui. http://jsfiddle.net/7GMZd/

NON PUOI FARLO QUESTO MODO

 .body { background-color: gray; border: ridge 2px black; .something { font-weight: bold; font-size: 20px; } }