Pracuję z Bootstrap 2.0.3 za pomocą LESS. Chcę go w znacznym stopniu dostosować, ale chcę unikać wprowadzania zmian w źródle, gdy tylko jest to możliwe, ponieważ zmiany w bibliotekach są częste. Jestem nowym użytkownikiem LESS, więc nie wiem, jak działa jego kompilacja. Jakie są najlepsze praktyki dotyczące pracy z ramami LESS lub LESS?
twitter-bootstrap
less
Joel Rodgers
źródło
źródło
Odpowiedzi:
Moje rozwiązanie jest podobne do jstam, ale unikam wprowadzania zmian w plikach źródłowych, gdy jest to możliwe. Biorąc pod uwagę, że zmiany w bootstrapie będą częste, chcę mieć możliwość pobrania najnowszego źródła i wprowadzenia minimalnych zmian poprzez trzymanie moich modyfikacji w osobnych plikach. Oczywiście nie jest to całkowicie kuloodporny.
Skopiuj bootstrap.less i variable.less do katalogu nadrzędnego. Zmień nazwę bootstrap.less na theme.less lub cokolwiek chcesz. Struktura katalogu powinna wyglądać następująco:
Zaktualizuj wszystkie odwołania w pliku theme.less, aby wskazywały na podkatalog bootstrap. Upewnij się, że twoja zmienna.less jest przywoływana z nadrzędnego, a nie z katalogu bootstrap, tak jak poniżej:
...
Dodaj zastąpienia CSS w pliku theme.less natychmiast po ich uwzględnieniu.
Link do theme.less zamiast bootstrap.less na twoich stronach HTML.
Ilekroć pojawia się nowa wersja, zmiany powinny być bezpieczne. Powinieneś także zrobić różnicę między niestandardowymi plikami bootstrap, ilekroć pojawi się nowa wersja. Zmienne i import mogą ulec zmianie.
źródło
Z tym też miałem problem. Z jednej strony chcę bardzo dostosować plik zmiennych.less własnymi kolorami i ustawieniami. Z drugiej strony chcę trochę zmienić pliki Bootstrap, aby ułatwić proces aktualizacji.
Moim rozwiązaniem (na razie) jest utworzenie dodatkowego pliku LESS i wstawienie go do
bootstrap.less
pliku po zaimportowaniu zmiennych i mixin. Więc coś takiego:W ten sposób, jeśli chcę zresetować kolory, czcionki lub dodać dodatkowe mixiny, mogę. Mój kod jest osobny, ale zostanie skompilowany w pozostałej części importu Bootstrap. To nie jest idealne, ale to przerwa, która działała dla mnie dobrze.
źródło
bootstrap.less
, chwytając nasz dostosowany plik VS potencjalnie zmieniając wiele linii, jeśli zmieni się nazwa mniejszej liczby rdzeni itp. Użyłem to rozwiązanie skompilowało mój zminimalizowany JS za pomocą chrząknięcia i wszystko jest w porządku! Dostosowania działające bez nieprzyjaznych!important
instrukcji!Z mojej strony mam po prostu plik o nazwie
theme.less
z importemboostrap.less
, a tuż poniżej nadpisuję (nawet jeśli wydaje się to złe, używając MNIEJ, ale łatwiej jest utrzymać) wartość zmiennej, której nie chcę aktualizować .Działa to dobrze w przypadku niestandardowych wartości zmiennych
variables.less
Następnie kompiluję
theme.less
plik zamiast tegobootstrap.less
Przykład
theme.less
:źródło
O wiele lepszym podejściem (IMHO) jest czerpanie wskazówek z projektu github Bootswatch o nazwie swatchmaker . Ten projekt jest specjalnie dostosowany do budowania i zarządzania dziesiątkami motywów Bootstrap na stronie.
Kompilacje
Makefile
w projekcieswatchmaker.less
(możesz zmienić nazwę na coś podobnegocustomizations.less
). Ten plik zawiera kilka importów:Możesz zmienić nazwę
swatch
folderu ibootswatch.less
plików na cokolwiek, co uznasz za odpowiednie.Ma to sens, ponieważ można uaktualnić Bootstrap bez wpływu na własne pliki. W rzeczywistości
Makefile
zawiera także polecenia do pobrania najnowszej wersji Bootstrap. Więcej informacji znajduje się w pliku README na stronie projektu.Jako bonus, README sugeruje również zainstalowanie
watchr
klejnotu, który automatycznie zbuduje projekt po.less
zmianie pliku.źródło
Jeśli (I TYLKO JEŚLI) masz czas, możesz to zrobić tak jak ja. Trzymam własną zmodyfikowaną wersję frameworku i przy każdej aktualizacji frameworku czytam dokumenty i sprawdzam źródła pod kątem modyfikacji.
To rozwiązanie może wydawać się mniej idealne na pierwszy rzut oka, ale mam ku temu powody. Nie pracuję z jednym, ale z mieszanką wielu frameworków, najlepszych praktyk, resetowania / arkuszy stylów normalizacyjnych itp. I zawsze jestem pewien, że żadna aktualizacja nigdy nie zmieni istniejących projektów w żaden sposób, którego nie widziałem.
Pracuję nad własną platformą niestandardową z następujących powodów.
źródło
Doszedłem do tego samego rozwiązania co Joel:
Niestandardowe mniej plików
Tak jak opisano powyżej: Tworzę lokalne kopie wszystkich mniejszych plików, które dostosowuję: Takich jak: „variable-custom.less”, „alerts-custom.less”, „buttons-custom.less”. Mogę więc użyć niektórych standardów i mieć własne dodatki. Minusem jest to, że kiedy Bootstrap zostanie zaktualizowany, migracja jest naprawdę trudna.
Ale jest coś jeszcze:
Zastąp style
Kiedy rozglądam się za przepływem pracy, często widzę ludzi sugerujących po prostu przesłonięcie stylów. Więc najpierw zaimportuj standardowe pliki Less, a następnie dodaj niestandardowe deklaracje na dole. Plusem tego jest to, że łatwiej jest zaktualizować do nowszej wersji. Minusem jest to, że skompilowany plik CSS zawiera wszystkie przesłonięcia. Niektóre selektory CSS są zdefiniowane dwukrotnie. Tak więc przeglądarka musi trochę poprawić, aby dowiedzieć się, co właściwie zastosować. To nie jest naprawdę czyste.
Zastanawiam się, dlaczego preprocesorzy nie są wystarczająco sprytni, aby rozwiązać takie podwójne deklaracje? Czy brakuje mi lepszego przepływu pracy?
źródło
Po prostu dodaj
@import "../../styles.less";
(lub gdziekolwiek twój arkusz stylów) do bootstrap.less na dole. Pozwala to na używanie miksów Bootstrap, takich jak.gradient
lub.border-radius
wewnątrz własnych stylów. Bez.źródło