Kompilator Less do CSS — Bezpłatny Online
Kompiluj kod Less do CSS gotowego dla przeglądarki natychmiast. Bezpłatny, działa w przeglądarce.
Wejściowy Less
Skompilowany CSS
Przykłady Less do CSS
Zmienne, mixiny i zagnieżdżanie Less są kompilowane do standardowego CSS. Przykład:
Zmienne, mixiny i zagnieżdżone selektory
Wejściowy Less:
Skompilowany CSS:
Użyj przycisku Przykład powyżej, aby załadować więcej przykładowych danych.
Czym jest Less do CSS?
Less to preprocesor CSS dodający zmienne, zagnieżdżanie, mixiny i funkcje. Przeglądarki nie uruchamiają Less — wymagają standardowego CSS. To narzędzie kompiluje Twój Less do CSS gotowego dla przeglądarki. Dokumentacja Less definiuje składnię.
Kompilacja działa całkowicie w Twojej przeglądarce. Nic nie jest wysyłane na serwer. Wynik to standardowy CSS. W odwrotnym kierunku (CSS do Less) użyj CSS do Less. Dla SCSS użyj SCSS do CSS.
Jak używać tego narzędzia
Wklej lub wczytaj Less
Skopiuj swój Less i wklej go do lewego edytora. Możesz też kliknąć Wczytaj, aby załadować plik .less lub .css. Przycisk Przykład ładuje przykładowe dane. Nieprawidłowy Less pokaże błąd.
Wyświetl skompilowany CSS
Prawy panel pokazuje skompilowany CSS. Zmienne są rozwiązywane, zagnieżdżanie jest spłaszczane, a mixiny są rozwijane. Wynik to standardowy CSS używalny przez każdą przeglądarkę.
Kopiuj lub pobierz
Użyj Kopiuj lub Pobierz. Aby sformatować wynik użyj Formatera CSS. Aby zminifikować użyj Minifikatora CSS.
Kiedy Less do CSS jest przydatny
Gdy masz Less z projektu (np. Bootstrap 3, Ant Design) lub ze starszej bazy kodu, ale potrzebujesz standardowego CSS — do szybkiego testowania, wdrożenia na CDN lub systemów bez narzędzi do budowania — ta kompilacja pomaga. Przydatna też do debugowania: widzisz dokładnie jaki CSS produkuje Twój Less.
Less jest używany przez wiele starszych projektów i niektóre frameworki UI. Jeśli dostosowujesz zmienne lub wyodrębniasz style, kompilacja tutaj daje Ci końcowy CSS. Aby przekonwertować istniejący CSS do struktury Less użyj CSS do Less.
Często zadawane pytania
Less vs SCSS?
Oba dodają zmienne, zagnieżdżanie i mixiny. Less używa & dla selektorów nadrzędnych; SCSS też. Składnia różni się nieznacznie. Wybierz na podstawie swojego projektu.
Czy obsługuje @import?
Importy mogą nie być rozwiązane, jeśli pliki nie są załadowane. Dla projektów wieloplikowych użyj oficjalnego kompilatora Less lub swojego bundlera.
Czy moje dane są prywatne?
Tak. Kompilacja działa całkowicie w Twojej przeglądarce. Żadne dane nie są wysyłane na żaden serwer.
Jak obsługiwane są mixiny i funkcje?
Mixiny i wbudowane funkcje (np. lighten(), darken()) są rozwijane podczas kompilacji. Wyjściowy CSS zawiera rozwiązane wartości.
Czy mogę używać z Bootstrap 3?
Bootstrap 3 używa Less. Do pełnej kompilacji Bootstrap użyj oficjalnego buildu. To narzędzie działa dla Less z pojedynczego pliku lub fragmentów kodu.
Powiązane narzędzia
Dla Less: lesscss.org i użycie Less. MDN CSS i W3C CSS definiują format wyjściowy.