Konwerter LESS na CSS Online
Kompiluj kod LESS do czystego CSS w Twojej przegladarce. Bez npm, bez Node.js, bez konfiguracji.
.card {
background: #c4552d;
border-radius: 8px;
padding: 1rem;
}
.card:hover {
opacity: 0.9;
}
.card .title {
font-size: 1.2rem;
color: white;
}Kompilator LESS do CSS
Dlaczego warto uzyc tego kompilatora LESS?
Zero konfiguracji
Bez npm, bez webpacka, bez Grunt. Wklej swoj kod LESS i natychmiast otrzymaj CSS.
Oficjalny less.js
Uzywa oficjalnego kompilatora less.js. Maksymalna kompatybilnosc ze standardem LESS.
Pelna prywatnosc
Twoj kod LESS nigdy nie jest wysylany na zaden serwer. Wszystko dziala w Twojej przegladarce.
Projekty Bootstrap 3
Z latowscia kompiluj motywy Bootstrap 3 i inne dziedziczone projekty oparte na LESS.
Jak to działa
Trzy kroki, żadnych komplikacji
Wklej kod LESS
Napisz lub wklej kod LESS do edytora. Zmienne @, zagniezdanie, mixiny i operacje matematyczne sa obslugiwane.
Natychmiastowa kompilacja
Wynikowy CSS pojawia sie automatycznie. Kompilator LESS.js dziala lokalnie w Twojej przegladarce.
Skopiuj lub pobierz CSS
Skopiuj CSS do schowka lub pobierz go jako plik .css gotowy do uzycia.
FAQ
Masz pytania?
LESS (stworzony przez Alexisa Selliera, pseudonim 'cloudhead', w 2009 roku) i SCSS (czesc Sass, stworzonego w 2006 roku) to preprocesory CSS o roznych filozofiach. Najbardziej widoczna roznica to skladnia zmiennych: LESS uzywa @ (ten sam prefiks co reguly CSS, takie jak @media, co moze powodowac zamieszanie), podczas gdy SCSS uzywa $. LESS zostal zaprojektowany do przetwarzania zarowno w przegladarce (przez less.js), jak i po stronie serwera — czego Sass poczatkowo nie planowalo. SCSS ma bogatszy ekosystem (Compass, Bootstrap 4+, Angular) i oficjalny kompilator Dart Sass. LESS pozostaje istotny glownie ze wzgledu na baze projektow dziedziczonych uzywajacych Bootstrap 3 i jego natywny kompilator JavaScript (less.js).
Zmienne LESS sa definiowane za pomoca @name: value; i uzywane bezposrednio: @base-color: #4d90fe; @font: 'Roboto', sans-serif; color: @base-color. Osobliwoscia LESS jest leniwa ewaluacja: zmienne moga byc uzywane przed ich deklaracja w tym samym zakresie, poniewaz LESS przetwarza caly plik przed rozwiazywaniem wartosci. Kontrastuje to z SCSS, gdzie zmienne przestrzegaja scislejszej kolejnosci deklaracji. Zmienne LESS moga rowniez byc interpolowane w selektorach i nazwach wlasciwosci przy uzyciu skladni @{name}.
Mixiny LESS sa definiowane jako zwykle klasy CSS i wywolywane ta sama skladnia: .mixin() definiuje mixin, a wywolanie .mixin() wewnatrz innej reguly wlacza go. Nie ma slowa kluczowego @mixin jak w SCSS. Oznacza to, ze kazda istniejaca klasa CSS moze byc uzyta jako mixin po prostu przez jej wywolanie. Parametryzowane mixiny uzywaja skladni .mixin(@param: default-value). LESS obsluguje rowniez straznikow mixin: .mixin(@a) when (@a > 10) { ... } do kompilacji warunkowej, funkcja ktora SCSS implementuje za pomoca @if.
Nie. Bootstrap 3 (2013) byl momentem masowej adopcji LESS, czyniacy go preprocesorem, ktory znal cale pokolenie deweloperow webowych. Bootstrap 4 (2018) w pelni przenioscil sie na SCSS (Sass), a Bootstrap 5 (2021) kontynuowal z SCSS. Migracja Bootstrap byla jednym z czynnikow, ktore skonsolidowaly SCSS jako dominujacy preprocesor w nowoczesnym ekosystemie. Jesli masz projekt dziedziczony z Bootstrap 3, to narzedzie moze pomoc Ci wydobyc skompilowany CSS bez utrzymywania srodowiska kompilacji LESS.
Narzedzie kompiluje bezposrednio dostarczony kod LESS, ale nie moze rozwiazywac odwolan do zewnetrznych plikow przez @import, poniewaz dziala w przegladarce bez dostepu do systemu plikow. Jesli masz wiele plikow LESS, mozesz je recznie polaczyc przed kompilacja. W przypadku projektow o zlozonej strukturze modularnej nadal wymagane jest lokalne srodowisko kompilacji z less.js lub integracjia LESS w Twoim bundlerze (webpack, Vite, Parcel).
LESS jest nadal potrzebny w trzech glownych kontekstach: utrzymywanie projektow dziedziczonych z Bootstrap 3 lub motywow WordPress/Magento/Drupal uzywajacych LESS; wydobywanie CSS z fragmentow LESS znalezionych w odziedziczonym kodzie w celu migracji do natywnego CSS lub SCSS; oraz nauka skladni LESS do pracy z istniejacymi bazami kodu. W przypadku nowych projektow aktualna rekomendacja to SCSS/Sass lub bezposrednio nowoczesny CSS z wlasciwosciami niestandardowymi i @layer.
LESS do CSS online: kompiluj LESS bez npm lub Node.js, idealne dla projektow Bootstrap 3
LESS to jezyk preprocesowania CSS stworzony przez Alexisa Selliera (znany online jako 'cloudhead') i opublikowany w 2009 roku jako oprogramowanie open-source na licencji Apache. Sellier pierwotnie napisal go w Ruby, ale przepisanie go w JavaScript (less.js) w 2010 roku bylo momentem, ktory zdefiniowal jego popularnosc: po raz pierwszy preprocesor CSS mogl byc uruchamiany bezposrednio w przegladarce przez zaladowanie pliku .less i biblioteki less.js przez tag <script>. Ta zdolnosc kompilacji po stronie klienta — choc rzadko uzywana w produkcji ze wzgledow wydajnosciowych — demokratyzowala dostep do preprocesowania CSS bez koniecznosci posiadania infrastruktury build. Glowne funkcje LESS to bezposrednie dziedziczenie CSS, zmienne z prefiksem @, zagniezdanie selektorow, wywolywalne mixiny (.mixin()), bezposrednia arytmetyka na wartosciach (margin: @base * 2) i wbudowane funkcje kolorow (lighten, darken, mix).
Najwiekszy wpyw LESS na ekosystem webowy przyszedl przez Bootstrap, najpopularniejszy framework interfejsu uzytkownika na swiecie. Bootstrap 2 (2012) i Bootstrap 3 (sierpien 2013) uzywaly LESS jako systemu dostosowywania i kompilacji, eksponujac miliony deweloperow webowych na skladnie LESS. Decyzja Bootstrap 4 (stabilna wersja w styczniu 2018) o migracji do SCSS byl definitywnym punktem zwrotnym: nowe projekty przeszly na SCSS, a LESS stal sie glownie kojarzony z utrzymywaniem projektow dziedziczonych.
Potrzeba internetowego kompilatora LESS w 2024 roku koncentruje sie glownie w trzech scenariuszach konserwacji i migracji. Pierwszym jest ekosystem dziedziczony Bootstrap 3: chociaz Bootstrap 5 jest dostepny od lat, wiele korporacyjnych aplikacji i witryn WordPress nadal uzywa motywow opartych na Bootstrap 3 z dostosowaniami LESS. Gdy trzeba wydobyc skompilowany CSS z konkretnego fragmentu lub zweryfikowac wynik zmiennej lub mixinu, robienie tego online jest szybsze niz utrzymywanie srodowiska kompilacji. Drugi scenariusz to migracja z LESS do SCSS lub nowoczesnego CSS: zrozumienie, jaki CSS generuje konkretny blok LESS, to pierwszy krok do jego przepisania w SCSS lub z natywnymi wlasciwosciami niestandardowymi. Trzeci scenariusz dotyczy utrzymywania motywow Magento (ktore intensywnie uzywaja LESS w systemie motywow Magento 2), niektorych motywow Drupal i aplikacji zbudowanych na wewnetrznych frameworkach, ktore przyjely LESS w latach 2012-2017. Convertir.ai uruchamia oficjalny kompilator less.js w Twojej przegladarce bez wysylania jakiegokolwiek wiersza kodu na zewnetrzne serwery.