Dodawanie przedrostków do nazw klas CSS za pomocą LESS lub SASS

Question

Próbuję użyć Bootstrap dla projektu, który obejmuje ponad 400 witryn i używa poprzednich nazw klas CSS (nad którymi nie mam kontroli). Występuje konflikt nazwy CSS, a rozwiązaniem dla mnie jest dodanie przedrostka do Bootstrap (na przykład .row do .tb-row).

Jestem zaznajomiony z metodą dodawania przestrzeni nazw za pomocą LESS, gdzie dodatkowa klasa jest opakowane wokół klas. Niestety nie wygląda na to, że rozwiąże moje problemy.

Czy istnieje metoda za pośrednictwem LESS, SASS lub innego kompilatora, który ułatwia dodanie przedrostka tb do wszystkich istniejących klas w Bootstrap?

Answer 1

Można chyba zrobić z SASS

• $ nazw: "TB";
• ⌘ + f (lub podobne), aby znaleźć wszystkie klasy w pliku CSS. Prawdopodobnie będziesz potrzebował wyrażeń regularnych (i niektórych prób + błędów), aby znaleźć je wszystkie.
• dodać .#{$namespace}- do wszystkich klas.

Idealnie chcesz uzyskać coś takiego:

$namespace: "tb"; 

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

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

skompilowany do

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

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

"Easy" może być rozciągnięcie ale "łatwiej" wydaje się pasować.

Nie jestem pewien, czy to jest najlepsze podejście, szczerze mówiąc, jestem po prostu ripping off a gist that I saw z komentarzami od ludzi o wiele mądrzejszych ode mnie. Może ci się przydać!

Answer 2

Trzeba by modyfikować bezpośrednio kod bootstrap, przykładem tego, jak można to osiągnąć w mniej elegancko:

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

Answer 3

Dodałem przedrostek „TB-” do całej klasy bootstrap (za mniej) w wersji 3.1.0. Więc po skompilowaniu mniejszej ilości plików otrzymasz coś w rodzaju ".tb-btn" Możesz rozwidlić mój projekt pod https://github.com/TimothyGuo/tb--prefix-for-Bootstrap-v3.1.0--LESS-

Answer 4

Oto widelec Bootstrapa z dodanymi prefiksami klas. https://github.com/sneas/bootstrap-sass-namespace. Działa całkiem dobrze dla mnie.