Konwerter CSS do Less — Bezpłatny online
Konwertuj CSS do Less z automatycznym zagnieżdżaniem. Bezpłatny, działa w przeglądarce — żadne dane nie są wysyłane na serwer.
Wejściowy CSS
Skonwertowany Less
Przykłady CSS do Less
Płaskie selektory CSS są konwertowane do zagnieżdżonego Less. Przykład:
Zagnieżdżona struktura z płaskiego CSS
Wejściowy CSS:
Skonwertowany Less:
Użyj przycisku Przykład powyżej, aby załadować więcej przykładowych danych.
Czym jest CSS do Less?
Less to preprocesor CSS dodający zmienne, zagnieżdżanie i mixiny. Konwersja zwykłego CSS do Less restrukturyzuje go z zagnieżdżaniem i przygotowuje do funkcji Less. To narzędzie analizuje Twój CSS i produkuje strukturę w stylu Less. Specyfikacje W3C CSS definiują źródło; Less definiuje wyjście.
Konwersja odbywa się całkowicie w Twojej przeglądarce. Nic nie jest wysyłane na serwer. Wynik jest prawidłowym Less. W odwrotnym kierunku (Less do CSS) użyj Less do CSS. Dla SCSS użyj CSS do SCSS.
Jak używać tego narzędzia
Wklej lub wczytaj CSS
Skopiuj swój CSS i wklej go do lewego edytora. Możesz też kliknąć Wczytaj, aby załadować plik .css. Przycisk Przykład ładuje przykładowe dane. Nieprawidłowy CSS pokaże błąd.
Sprawdź wynik Less
Prawy panel pokazuje skonwertowany Less. Selektory mogą być zagnieżdżone tam, gdzie struktura na to pozwala. Możesz ręcznie dodać zmienne i mixiny po konwersji.
Kopiuj lub pobierz
Użyj Kopiuj lub Pobierz. Skompiluj Less za pomocą Less do CSS, aby zweryfikować. Aby najpierw sformatować CSS, użyj Formatera CSS.
Kiedy CSS do Less jest przydatny
Gdy migrujesz projekt ze zwykłego CSS do Less, lub gdy masz CSS z eksportu projektu i chcesz go zintegrować z bazą kodu opartą na Less (np. Bootstrap 3, Ant Design), ta konwersja zapewnia punkt startowy. Narzędzia do budowania takie jak webpack i Gulp kompilują Less. Wynik daje Ci zagnieżdżoną strukturę, którą możesz dopracować zmiennymi i mixinami.
Narzędzia projektowe często eksportują zwykły CSS. Konwertując go tutaj do Less, możesz dodać go do struktury opartej na komponentach. Dla SCSS użyj CSS do SCSS. Dla prefiksów dostawców użyj Prefiksera CSS.
Często zadawane pytania
Czy dodaje zmienne lub mixiny?
Konwerter skupia się na strukturze (zagnieżdżaniu). Nie wyodrębnia automatycznie powtarzających się wartości do zmiennych. Dodaj zmienne i mixiny ręcznie zgodnie z potrzebami.
Czy moje dane są prywatne?
Tak. Konwersja odbywa się całkowicie w Twojej przeglądarce. Żadne dane nie są wysyłane na serwer.
Jak działa zagnieżdżanie?
Narzędzie wnioskuje zagnieżdżanie z relacji między selektorami (np. .parent .child staje się zagnieżdżony). Złożone selektory mogą pozostać płaskie. Sprawdź i dostosuj według potrzeb.
Less vs SCSS?
Oba dodają zmienne, zagnieżdżanie i mixiny. Less jest używany przez Bootstrap 3, Ant Design. SCSS jest używany przez Bootstrap 4+, wiele nowoczesnych frameworków. Wybierz na podstawie swojego stosu technologicznego.
Czy mogę skompilować wynik?
Tak. Wklej Less do Less do CSS, aby skompilować i zweryfikować. Wynik powinien odpowiadać strukturze oryginalnego CSS.
Powiązane narzędzia
Dla Less, odwiedź lesscss.org. W3C CSS i MDN CSS definiują format źródłowy. Bootstrap. webpack. Figma.