Kompilator Less do CSS online — Numio
Kompiluj Less do CSS w przeglądarce. Oficjalny kompilator less.js rozwija zmienne, zagnieżdżenia, mixiny i operacje do zwykłego CSS, dzięki czemu możesz sprawdzić wynik bez instalowania lessc.
Sprawdź CSS generowany ze zmiennych, zagnieżdżeń i mixinów Less.
Less
CSS
Kiedy go używać
- Sprawdź CSS generowany ze zmiennych, zagnieżdżeń i mixinów Less.
- Przekonwertuj mały plik Less do projektu używającego zwykłego CSS.
Jak używać
- Wklej kod Less lub otwórz plik .less.
- Wybierz ustawienie prefiksów dostawców dla przeglądarek docelowych.
- Sprawdź wygenerowany CSS, a następnie go skopiuj.
Kod Less
@primary: #2563eb;
.button {
color: @primary;
&:hover { text-decoration: underline; }
}Wynik CSS
.button {
color: #2563eb;
}
.button:hover {
text-decoration: underline;
}Szczegóły i ograniczenia
Niezdefiniowana zmienna lub niedomknięty nawias zatrzymuje kompilację. Podczas szukania błędu zacznij od krótkiego fragmentu.
Kompilacja odbywa się w przeglądarce. @import zewnętrznego adresu URL może spowodować pobranie zasobu przez przeglądarkę, dlatego najlepiej używać samodzielnego kodu.
Importy innych plików lokalnych, wtyczki Less i opcje kompilatora specyficzne dla projektu nie są dostępne. Prefiksy dostawców zależą od ustawienia przeglądarki docelowej.
FAQ
Czy wynik jest taki sam jak przy kompilacji lessc?
Narzędzie używa less.js, tego samego kompilatora co lessc, więc samodzielny plik przy domyślnych opcjach daje ten sam CSS. Funkcje projektowe, np. importy lokalne i wtyczki, nie są tu dostępne.
Czy mogę skompilować plik używający @import?
Przeglądarka nie może rozwiązać importów wskazujących inne pliki na komputerze. Wklej importowany kod bezpośrednio albo skompiluj cały projekt przy użyciu lessc.
Czym różni się Less od CSS?
Less to preprocesor CSS. Dodaje zmienne, zagnieżdżenia, mixiny i funkcje. Zanim przeglądarka go użyje, musi zostać skompilowany do CSS.