Stylus naar CSS Converter
Converteer Stylus-preprocessorcode naar standaard CSS
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?
Stylus is een CSS-preprocessor met optionele accolades, variabelen, mixins en nesting. Net als Sass en Less compileert het naar standaard CSS voor browsers. Dit hulpmiddel converteert Stylus naar CSS in uw browser—geen build-stap nodig. De W3C CSS-specificatie definieert de uitvoer.
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
Zijn mijn gegevens privé?
Ja. Conversie draait volledig in uw browser. Er worden geen gegevens naar een server gestuurd.
Ondersteunt het alle Stylus-functies?
Dit hulpmiddel ondersteunt variabelen, nesting en de & parent-selector. Mixins, functies, @import en andere geavanceerde functies kunnen de officiële compiler nodig hebben.
Stylus vs SCSS vs Less?
Allemaal zijn CSS-preprocessors. Stylus heeft minimale syntaxis (optionele accolades/puntkomma's). SCSS is CSS-compatibel. Less is vergelijkbaar met SCSS. Gebruik degene die bij uw stack past.
Hoe zit het met darken(), lighten()?
Ingebouwde Stylus-functies zoals darken() worden niet geëvalueerd door deze basisconverter. Voor volledige ondersteuning gebruikt u de officiële Stylus-compiler in uw build.
Kan ik CSS naar Stylus converteren?
Dit hulpmiddel converteert alleen Stylus naar CSS. Voor CSS naar een andere preprocessor CSS naar SCSS of CSS naar Less.