Mam całkiem duży plik CSS, który chcę przekonwertować na mniej. Kiedy pisałem CSS, nie znałem less.css, ale teraz nadal chcę używać mojego starego CSS.
Czy istnieje narzędzie, które może mi pomóc w automatycznej konwersji?
Mam całkiem duży plik CSS, który chcę przekonwertować na mniej. Kiedy pisałem CSS, nie znałem less.css, ale teraz nadal chcę używać mojego starego CSS.
Czy istnieje narzędzie, które może mi pomóc w automatycznej konwersji?
Odpowiedzi:
Znalazłem coś teraz: http://leafo.net/lessphp/lessify/
Wykonuje podstawowe formatowanie, np .:
#header {
/* ... */
}
#header p {
/* ... */
}
do
#header {
/* ... */
p {
/* ... */
}
}
W rzeczywistości nie potrzebujesz żadnego narzędzia do konwersji, aby rozpocząć pracę z LESS. Składnia LESS jest wstecznie kompatybilna z CSS . Oznacza to, że każdy plik CSS jest również prawidłowym plikiem LESS.
Po prostu zdobądź swój CSS i zmień jego nazwę na MNIEJSZY plik. Następnie korzystaj z funkcji MNIEJSZYCH wraz ze zmianami. Im bardziej zaktualizujesz plik, tym bardziej będziesz mógł korzystać z MNIEJ funkcji.
Zrobiłem to samo dla SCSS i bardzo dużego projektu z 10 plikami CSS. Przepisanie całego CSS przy pomocy SCSS było prawie niemożliwe (i ogromna strata czasu). Po prostu zmieniłem jego nazwę, a następnie za każdym razem, gdy pracowałem nad plikiem CSS, przeprowadzałem małe refaktoryzowanie kodu, aby skorzystać z mixin, zmiennych i tak dalej.
Czy spojrzałeś na Least? Konwersja CSS jest znacznie lepsza niż Lessify. W szczególności Lessify nie optymalizuje twoich zajęć. Skopiował reset przeglądarki do wszystkich wygenerowanych miksów, tworząc zbędne atrybuty. Oczywiste jest, że wciąż jest na etapie eksperymentalnym. Żadne z narzędzi nie może określić semantyki, więc nie mogą konwertować wartości na wyrażenia, zmienne lub miksy parametryczne.
Najmniej lepiej radzi sobie z optymalizacją i wydaje się być bardziej funkcjonalny. Obsługuje nawet pseudoklasy:
Te narzędzia są idealne do pracy z dużymi istniejącymi plikami CSS. Oto kroki, które zalecam przekonwertować CSS na MNIEJ (pamiętaj, aby zachować kopię oryginalnych plików CSS):
Jeśli pracujesz z kilkoma dodatkowymi plikami CSS, połącz je w jeden plik CSS. Zapewnia to, że wszystko jest LESZONE i zoptymalizowane razem.
Uruchom wynikowy kod CSS za pomocą internetowego narzędzia do czyszczenia CSS. Mam dobre wyniki z cleancss: http://www.cleancss.com/ . Spowoduje to usunięcie wszelkich obcych i zbędnych znaczników, które mogą nie zostać przechwycone przez konwerter LESS.
Usuń @Media i wszelkie resetowania stylu, które masz w pliku CSS. Mogą powodować problemy lub wprowadzać ewentualne zwolnienia. Prawdopodobnie dobrym pomysłem jest trzymanie resetu w osobnym pliku.
Wklej powstały plik CSS do Najmniej i obserwuj bestię.
Ponownie wprowadź swoje resetowania i @screen.
Po zakończeniu przejrzyj każdy z atrybutów i znajdź dobrych kandydatów do refaktoryzacji i zmień je w LESS zmienne i wyrażenia. Atrybuty kolorów i czcionek CSS są najłatwiejsze do rozróżnienia, proste globalne wyszukiwanie i zamiana działa dobrze. Na koniec możesz zdecydować, czy chcesz podzielić pojedynczy plik na mniejsze pliki logiczne. Może się okazać, że proces powoduje reorganizację plików w inny sposób.
Nie jestem autorem Least, tylko ktoś szuka podobnego narzędzia i postanowił opowiedzieć o tym światu.
@import
? Myślałem, że LESS jest w stanie przeanalizować @import
instrukcje i skonsolidować wszystkie arkusze stylów w jednym CSS, gdy skompilujesz pliki LESS. Wygląda na to, że umieszczenie całego starannie uporządkowanego CSS w jednym gigantycznym arkuszu stylów w celu przekształcenia go w LESS byłoby krokiem wstecz dla łatwości konserwacji.
Nie sądzę, aby istniał sposób, aby konwerter wiedział, co chcesz zrobić z większą częścią kodu.
Na przykład niekoniecznie wiedziałby, jakich zmiennych chcesz użyć. Lub jak wygenerować mixiny lub funkcje.
Myślę, że w tym przypadku musisz to zrobić ręcznie.
Co powiesz na wyszukiwanie i zamianę.
jeśli masz color:#ffffff
i chcesz to zmienić@color
po prostu wyszukaj color:#ffffff
lub color : #ffffff
zamień na @color
.
Zazwyczaj nie ufam tym narzędziom.
lub możesz napisać naprawdę prosty skrypt PHP, który sobie z tym poradzi.
Aktualizacja 1 :
Lub możesz użyć http://nex-3.com/posts/96-scss-sass-is-a-css-extension, który jest podobny do mniej i ma narzędzie do konwersji.
Wypróbuj tę stronę: css2less.cc
Konwertuje Twój CSS na MNIEJ podczas pisania.