Stylus naar CSS Converter — Gratis Online
Converteer Stylus-preprocessorcode naar standaard CSS direct, gratis, alleen in browser.
Stylus-invoer
Geconverteerde CSS
Stylus naar CSS voorbeelden
Stylus-variabelen en nesting compileren naar platte CSS. Voorbeeld:
Variabelen en geneste selectors
Stylus-invoer:
Gecompileerde CSS:
Gebruik Voorbeeld hierboven om meer voorbeeldgegevens te laden.
Wat is Stylus naar CSS?
U heeft een .styl-bestand met variabelen, geneste selectors en die schone minimale syntaxis — maar de browser begrijpt alleen gewone CSS. Dit hulpmiddel overbrugt dat verschil. Stylus is een CSS-preprocessor die bekend staat om zijn flexibele syntaxis: accolades, puntkomma's en dubbele punten zijn allemaal optioneel. Net als Sass/SCSS en Less moet het gecompileerd worden voordat browsers het kunnen gebruiken. In een volledig project gebruikt u het officiële Stylus npm-pakket — voor snelle controles of snippets is dat overdreven. Dit hulpmiddel voert de conversie volledig uit in uw browser. De uitvoer volgt de W3C CSS-specificatie.
Plak Stylus of upload een .styl-bestand. Het hulpmiddel verwerkt variabelen, nesting en de & parent-selector. Het draait volledig in uw browser. Voor SCSS of Less SCSS naar CSS of Less naar CSS. Voor formatteren van de uitvoer de CSS Formatter.
Hoe dit hulpmiddel te gebruiken
Plak of upload Stylus
Plak uw Stylus-code in de linker editor of klik op Uploaden om een .styl-bestand te laden. Gebruik Voorbeeld om voorbeeld-Stylus met variabelen en nesting te laden.
Bekijk de CSS-uitvoer
Het rechterpaneel toont de gecompileerde CSS. Voor complexe Stylus (mixins, functies, imports) kan de officiële Stylus-compiler nodig zijn. Voor validatie de CSS Validator.
Kopiëren of downloaden
Gebruik Kopiëren of Downloaden om de CSS op te slaan. Voor minificeren de CSS Minificeerder. Voor CSS converteren naar SCSS of Less CSS naar SCSS of CSS naar Less.
Waar Stylus-conversie helpt
Stylus wordt gebruikt in projecten gebouwd met Vite, Webpack of Gulp. Wanneer u een snippet wilt compileren zonder een volledige build, of wilt inspecteren wat Stylus produceert, helpt dit hulpmiddel. Build-pipelines gebruiken typisch het officiële Stylus-pakket.
Voor andere preprocessors SCSS naar CSS of Less naar CSS. Voor het combineren van CSS-bestanden de CSS Combiner. Voor het extraheren van CSS uit HTML de CSS Extractor.
Veelgestelde vragen
Hoe converteer ik Stylus naar CSS zonder installatie?
Plak uw Stylus-code in dit hulpmiddel en de CSS verschijnt direct. Alles draait in de browser via JavaScript — geen npm, geen Node.js, geen build-stap. Uw code verlaat uw apparaat niet.
Ondersteunt dit hulpmiddel Stylus-variabelen en nesting?
Ja. Variabelen (bijv. $primary = #007bff), geneste selectors en de & parent-selector worden allemaal ondersteund. Voor geavanceerde functies zoals mixins, functies en @import gebruikt u de officiële Stylus-compiler.
Wat is het verschil tussen Stylus, SCSS en Less?
Alle drie zijn CSS-preprocessors. Stylus heeft de meest flexibele syntaxis — accolades, puntkomma's en dubbele punten zijn allemaal optioneel. SCSS is een CSS-superset. Less is vergelijkbaar met SCSS in syntaxis.
Waarom werken functies zoals darken() niet?
Ingebouwde Stylus-functies zoals darken() vereisen de volledige Stylus-runtime. Dit hulpmiddel doet alleen statische conversie. Voor volledige functieondersteuning installeert u Stylus via npm.
Wordt mijn Stylus-code naar een server gestuurd?
Nee. Alle conversie draait volledig in uw browser. Uw Stylus-code verlaat uw apparaat niet — geen backend, geen logging.