Konwerter Stylus do CSS — Bezpłatny Online
Konwertuj kod Stylus do standardowego CSS natychmiastowo, bezpłatnie, tylko w przeglądarce.
Wejściowy Stylus
Skonwertowany CSS
Przykłady Stylus do CSS
Zmienne i zagnieżdżanie Stylus są kompilowane do standardowego CSS. Przykład:
Zmienne i zagnieżdżone selektory
Wejściowy Stylus:
Skompilowany CSS:
Użyj przycisku Przykład powyżej, aby załadować więcej przykładowych danych.
Czym jest Stylus do CSS?
Masz plik .styl ze zmiennymi, zagnieżdżonymi selektorami i tą czystą minimalną składnią — ale przeglądarka rozumie tylko zwykły CSS. To narzędzie wypełnia tę lukę. Stylus to preprocesor CSS znany z elastycznej składni: nawiasy klamrowe, średniki i dwukropki są wszystkie opcjonalne. Jak Sass/SCSS i Less, musi być skompilowany przed użyciem przez przeglądarki. W pełnym projekcie użyłbyś oficjalnego pakietu npm Stylus — dla szybkich sprawdzeń lub snippetów to przesada. To narzędzie wykonuje konwersję całkowicie w Twojej przeglądarce. Wynik jest zgodny ze specyfikacją W3C CSS.
Wklej Stylus lub załaduj plik .styl. Narzędzie obsługuje zmienne, zagnieżdżanie i selektor nadrzędny &. Działa całkowicie w Twojej przeglądarce. Dla SCSS lub Less użyj SCSS do CSS lub Less do CSS. Aby sformatować wynik użyj Formatera CSS.
Jak używać tego narzędzia
Wklej lub wczytaj Stylus
Wklej swój kod Stylus do lewego edytora lub kliknij Wczytaj, aby załadować plik .styl. Użyj Przykład, aby załadować przykładowy Stylus ze zmiennymi i zagnieżdżaniem.
Wyświetl wynik CSS
Prawy panel pokazuje skompilowany CSS. Dla złożonego Stylusa (mixiny, funkcje, importy) może być potrzebny oficjalny kompilator Stylus. Do walidacji użyj Walidatora CSS.
Kopiuj lub pobierz
Użyj Kopiuj lub Pobierz, aby zapisać CSS. Aby zminifikować użyj Minifikatora CSS. Aby przekonwertować CSS do SCSS lub Less użyj CSS do SCSS lub CSS do Less.
Gdzie konwersja Stylus jest przydatna
Stylus jest używany w projektach budowanych z Vite, Webpack lub Gulp. Gdy chcesz skompilować fragment kodu bez pełnego buildu, lub sprawdzić co produkuje Stylus, to narzędzie pomaga. Potoki buildów zazwyczaj używają oficjalnego pakietu Stylus.
Dla innych preprocesorów użyj SCSS do CSS lub Less do CSS. Aby łączyć pliki CSS użyj Łącznika CSS. Aby wyodrębnić CSS z HTML użyj Ekstraktora CSS.
Często zadawane pytania
Jak przekonwertować Stylus do CSS bez instalacji?
Po prostu wklej kod Stylus do tego narzędzia i CSS pojawia się natychmiast. Wszystko działa w przeglądarce przez JavaScript — bez npm, bez Node.js, bez kroku budowania. Twój kod nie opuszcza urządzenia.
Czy to narzędzie obsługuje zmienne i zagnieżdżanie Stylus?
Tak. Zmienne (np. $primary = #007bff), zagnieżdżone selektory i selektor nadrzędny & są obsługiwane. Dla zaawansowanych funkcji jak mixiny, funkcje i @import użyj oficjalnego kompilatora Stylus.
Jaka jest różnica między Stylus, SCSS i Less?
Wszystkie trzy to preprocesory CSS. Stylus ma najbardziej elastyczną składnię — nawiasy klamrowe, średniki i dwukropki są wszystkie opcjonalne. SCSS jest nadzbiorem CSS. Less jest podobny do SCSS w składni.
Dlaczego funkcje jak darken() nie działają?
Wbudowane funkcje Stylus jak darken() wymagają pełnego środowiska uruchomieniowego Stylus. To narzędzie wykonuje tylko konwersję statyczną. Dla pełnej obsługi zainstaluj Stylus przez npm.
Czy mój kod Stylus jest wysyłany na serwer?
Nie. Cała konwersja działa całkowicie w Twojej przeglądarce. Twój kod Stylus nie opuszcza urządzenia — brak backendu, brak logowania.