CSS naar SCSS Converter
Converteer CSS-code naar SCSS met nesting
CSS-invoer
Geconverteerde SCSS
CSS naar SCSS voorbeelden
Platte CSS-selectors worden geconverteerd naar geneste SCSS. Voorbeeld:
Geneste structuur uit platte CSS
CSS-invoer:
Geconverteerde SCSS:
Gebruik Voorbeeld hierboven om meer voorbeeldgegevens te laden.
Wat is CSS naar SCSS?
SCSS voegt variabelen, nesting en mixins toe aan CSS. Het converteren van platte CSS naar SCSS herstructureert het met nesting en bereidt het voor op SCSS-functies. Dit hulpmiddel analyseert uw CSS en geeft SCSS-structuur uit. De W3C CSS-specificaties definiëren de bron; Sass definieert de uitvoer.
Conversie draait volledig in uw browser. Er wordt niets naar een server gestuurd. De uitvoer is geldige SCSS. Voor de omgekeerde richting (SCSS naar CSS) gebruikt u SCSS naar CSS. Voor Less CSS naar Less.
Hoe dit hulpmiddel te gebruiken
Plak of upload CSS
Kopieer uw CSS en plak het in de linker editor. U kunt ook op Uploaden klikken om een .css-bestand te laden. De knop Voorbeeld laadt voorbeeldgegevens. Ongeldige CSS toont een fout.
Bekijk de SCSS-uitvoer
Het rechterpaneel toont geconverteerde SCSS. Selectors kunnen genest worden waar de structuur het toelaat. U kunt variabelen en mixins handmatig toevoegen na conversie.
Kopiëren of downloaden
Gebruik Kopiëren of Downloaden. Compileer de SCSS met SCSS naar CSS om te verifiëren. Voor eerst CSS formatteren gebruikt u de CSS Formatter.
Wanneer CSS naar SCSS helpt
Bij het migreren van een project van platte CSS naar SCSS, of wanneer u CSS hebt van een design-export en het wilt integreren in een SCSS-gebaseerde codebase (bijv. Bootstrap 4+, Foundation), biedt deze conversie een startpunt. Build-tools zoals webpack en Vite compileren SCSS. De uitvoer geeft u geneste structuur die u kunt verfijnen met variabelen en mixins.
Design-tools zoals Figma exporteren vaak platte CSS. Hier converteren naar SCSS stelt u in staat het toe te voegen aan een component-gebaseerde structuur. Voor Less in plaats daarvan CSS naar Less. Voor vendor-prefixes de CSS Prefixer.
Veelgestelde vragen
Voegt het variabelen of mixins toe?
De converter richt zich op structuur (nesting). Het extraheert geen herhaalde waarden automatisch naar variabelen. Voeg variabelen en mixins handmatig toe op basis van uw behoeften.
Zijn mijn gegevens privé?
Ja. Conversie draait volledig in uw browser. Er worden geen gegevens naar een server gestuurd.
Hoe werkt nesting?
Het hulpmiddel leidt nesting af uit selectorrelaties. Complexe selectors kunnen plat blijven. Controleer en pas aan indien nodig.
CSS naar SCSS vs CSS naar Less?
Beide produceren preprocessor-syntaxis. SCSS wordt breder gebruikt (Bootstrap 4+, veel frameworks). Less wordt gebruikt door Bootstrap 3, Ant Design. Kies op basis van uw stack.
Kan ik de uitvoer compileren?
Ja. Plak de SCSS in SCSS naar CSS om te compileren en verifiëren. De uitvoer zou overeen moeten komen met uw oorspronkelijke CSS-structuur.
Gerelateerde hulpmiddelen
Voor Sass/SCSS: sass-lang.com en Sass docs. W3C CSS en MDN CSS definiëren het bronformaat. Zie ook Bootstrap, Figma, webpack, Vite.