Aggiungere prefissi ai nomi di classi CSS utilizzando LESS o SASS

Question

Sto cercando di utilizzare Bootstrap in un progetto che comprende oltre 400 siti e utilizza i nomi di classi CSS precedenti (di cui non ho alcun controllo). Mi sono imbattuto in alcuni clash dei nomi CSS e la soluzione per me è aggiungere un prefisso a Bootstrap (.row a .tb-row per esempio).

Ho familiarità con il metodo di aggiungere uno spazio dei nomi utilizzando LESS, dove una classe aggiuntiva è avvolta attorno alle classi. Sfortunatamente, questo non sembra che risolva i miei problemi.

Esiste un metodo tramite LESS, SASS o qualsiasi altro compilatore che mi faciliti l'aggiunta di un prefisso tb- a tutte le classi esistenti in Bootstrap?

Answer 1

Probabilmente si potrebbe fare questo con SASS

• $ namespace: "tb";
• ⌘ + f (o simile) per trovare tutte le classi nel file CSS. Probabilmente avrai bisogno di una regex (e qualche errore di prova +) per trovarli tutti.
• aggiungi .#{$namespace}- a tutte le classi.

Idealmente, si otterrebbe ottenere qualcosa del genere:

$namespace: "tb"; 

.#{$namespace}-myClass { 
    background:pink !important; 
} 

.#{$namespace}-carousel-module { 
    width: 25%; 
} 

compilato per

.tb-myClass { 
    background:pink !important; 
} 

.tb-carousel-module { 
    width: 25%; 
} 

"Easy" potrebbe essere un tratto, ma più "facile" sembra opportuno.

Non sono sicuro che questo sia l'approccio migliore, in tutta onestà, sono solo ripping off a gist that I saw con commenti di persone molto più intelligenti di me. Può tornare utile per te!

Answer 2

Si avrebbe bisogno di modificare direttamente il codice di bootstrap, un esempio di come questo potrebbe essere realizzato con eleganza in meno:

.prefixname { 
    &-row { 
     ... 
    } 
} 

Answer 3

Ho aggiunto prefisso "TB-" per tutta la classe di bootstrap (per meno) nella v3.1.0. Quindi, dopo aver compilato i file in meno, otterrai qualcosa come ".tb-btn" Puoi inserire il mio progetto a https://github.com/TimothyGuo/tb--prefix-for-Bootstrap-v3.1.0--LESS-

Answer 4

Ecco il fork di Bootstrap con i prefissi di classe aggiunti. https://github.com/sneas/bootstrap-sass-namespace. Funziona piuttosto bene per me.