Czy istnieje narzędzie konwertujące css na less.css?


21

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?


zobacz moje zmiany poniżej.
fatnjazzy

Powinieneś sprawdzić odpowiedź @ Simone Carletti i być może rozwinąć to, o co tak naprawdę pytasz. Może nie być konieczna rzeczywista „konwersja” poza zmianą nazwy pliku.
Su '

Ciekawe, ale zastanawiam się, czy warto dodać 33 KB kodu JS (less.js), aby zmniejszyć rozmiar plików CSS.
Marco Demaio

1
Oczywiście nie używam kompilatora JavaScipt. Rozmiar CSS nie jest powodem, dla którego go używam. Utrzymanie jest powodem. :)
js-coder

Odpowiedzi:



15

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.


To przynosi naprawdę dobry punkt. Dotychczasowe odpowiedzi wydają się koncentrować na części „konwersji” pytania, tworzeniu miksów itp., A nie tylko na tym, czy bieżący plik może zostać użyty w przełączeniu na przepływ pracy LESS.
Su '

6

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:

http://toki-woki.net/p/least/

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):

  1. Jeśli pracujesz z kilkoma dodatkowymi plikami CSS, połącz je w jeden plik CSS. Zapewnia to, że wszystko jest LESZONE i zoptymalizowane razem.

  2. 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.

  3. 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.

  4. Wklej powstały plik CSS do Najmniej i obserwuj bestię.

  5. Ponownie wprowadź swoje resetowania i @screen.

  6. 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.


Czy te konwertery nie rozumieją @import? Myślałem, że LESS jest w stanie przeanalizować @importinstrukcje 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.
Lèse majesté

Tak, ale pamiętaj, że narzędzia te istnieją online, więc musisz je wyciąć i wkleić w polu tekstowym, aby nie miał dostępu do zewnętrznych arkuszy stylów.
Joel Rodgers

Ach, tak naprawdę nie kliknąłem linków. Zakładałem, że są to narzędzia komputerowe. To ma więc sens.
Lèse majesté

5

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.


Zgoda. Wymagana jest pewna ilość wnioskowania i znajomości twojego zamiaru, do których komputery po prostu nie są zbyt dobrze dostosowane. Będziesz mógł zautomatyzować niektóre zadania (patrz link z @dotweb) i być może skonsolidować rzeczy takie jak wartości kolorów w jednej zmiennej, ale to chyba o to chodzi.
Su '

Tak, ale konwersja z LESS na CSS jest konwersją 1 do 1, więc teoretycznie istnieje jakiś algorytm, który może tworzyć zoptymalizowany kod LESS z CSS ... Ktoś po prostu musi go napisać.
trusktr

Mixiny mogą działać w obie strony, ponieważ komputer może łatwo zbierać i grupować selektory i zagnieżdżać je. Na szczęście jest to najbardziej żmudna część konwersji i można ją obliczyć (patrz moja odpowiedź). Niezależnie od tego, z uwagi na kaskadowy charakter CSS, może on renderować się inaczej niż oryginalny CSS. Zmienne i wyrażenia są niemożliwe. Komputery nie mogą określić zamiaru ani semantyki. Jak komputer może dowiedzieć się, że szerokość: 400 w CSS to tak naprawdę szerokość: pagewidth / 2 w MNIEJ? Konwerter konwertuje kolory i czcionki na zmienne.
Joel Rodgers,

@JoelRodgers, dlaczego kaskadowa natura CSS implikuje, że „dekompilatory” będą wadliwe? (Oczywiście dekompilator może być wadliwy, ale w zasadzie nie jest trudno stwierdzić, czy zmiana kolejności terminów zmieni semantykę).
Peter Taylor,

Mówię o deklaracjach klasowych i atrybutach. Musisz zadeklarować je w dokładnie tej samej kolejności, w przeciwnym razie uzyskasz inne wyniki. Zły błąd, miałem na myśli Nested Rules zamiast mixins.
Joel Rodgers

3

Co powiesz na wyszukiwanie i zamianę.

jeśli masz color:#ffffffi chcesz to zmienić@color

po prostu wyszukaj color:#fffffflub color : #ffffffzamień 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.


Tak, już o tym myślałem. Ale to dość duży plik, więc chcę się upewnić, że będzie to najłatwiejszy sposób. ;) Pomyśl o mixinach itp.

lub możesz napisać naprawdę prosty skrypt PHP, który sobie z tym poradzi.
fatnjazzy

1
Nie będziesz w stanie znaleźć narzędzia, które niezawodnie konwertuje czysty CSS do korzystania z miksów LESS.
Alex

Masz rację. Zmienne automatyczne i miksowanie nie mają sensu.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.