Deze handleiding illustreert de volledige procedure voor het opzetten van een snel Node.js SASS/SCSS-project.
Hoe zet u een snel Node.js Sass/SCSS-project op?
SASS gebruikt pure CSS-eigenschappen om styling over het geselecteerde element uit te voeren. Het versterkt de originele CSS door de wiskundige en variabele functies op te nemen. Het past styling toe op de DOM in een hiërarchie. Door SASS te integreren met Node.js kan de ontwikkelaar het project heel eenvoudig vormgeven om het opvallender en pixel-perfecter te maken.
Laten we de onderstaande stappen volgen om een Node.js-project op te zetten langs de SASS/SCSS.
Stap 1: “SASS” installeren
Installeer eerst “ SASS 'wereldwijd in het Node.js-project met behulp van de knooppuntpakketbeheerder' npm 'via dit commando:
npm install -g sass
Uit de uitvoer blijkt dat “ saas ”-pakket is geïnstalleerd:
Stap 2: Directory's maken
Maak vervolgens afzonderlijke mappen voor zowel CSS- als SCSS-bestanden met behulp van de volgende opdracht “mkdir”:
mkdir cssbestanden
mkdir scssFiles
Het is duidelijk dat het bovenstaande “ mkdir ' commando heeft de ' cssBestanden ' En ' scssbestanden ” mappen:
Stap 3: Koppel de SASS-module
Gebruik nu de “ brutaal ”-module om te kijken naar eventuele wijzigingen in de aanwezige bestanden van de “ scssbestanden ” map. In geval van wijziging worden er automatisch CSS-bestanden aangemaakt binnen de gekoppelde “ cssBestanden ” en voeg dezelfde scss-gegevens in het CSS-bestand in.
Het uit te voeren commando voor het bekijken en koppelen van de “ brutaal ”-module is als volgt:
brutaal --horloge scssbestanden : cssBestandenSaas let nu op allerlei wijzigingen in de map scssFiles.
Opmerking: De bovenstaande opdracht moet worden uitgevoerd op de opdrachtprompt van het systeem, omdat deze niet werkt op toolsterminals zoals Visual Studio-code.
Stap 4: Creatie van SCSS en bijbehorende CSS-bestanden
In deze stap wordt een leeg bestand met de naam “ scsStijl ' met ' scs 'extensie wordt gemaakt in de' scssbestanden ” map:
Daarna twee bestanden met de naam “ scssStyle.css ' En ' scssStyle.css.map ” wordt automatisch aangemaakt door de “ brutaal ”-module in de “ cssBestanden ”-map, zoals hieronder weergegeven:
Stap 5: Code invoegen
Voer ten slotte een SCSS-code in binnen de “ scssStyle.scss ”zoals hieronder weergegeven:
Nu wordt dezelfde code in het CSS-formaat automatisch ingevoegd in de “ scssStyle.css ' bestand:
Laten we stap 4 en 5 visueel illustreren met behulp van gif:
In deze handleiding worden de stappen uitgelegd voor het maken van het Node.js SASS\SCSS-project.
Conclusie
Om een snel Node.js SASS/SCSS-project op te zetten, installeert u eerst de module “ brutaal ”-module en maak vervolgens twee mappen, één voor “ SASS\SCSS ”-bestand en een ander voor “ CSS ” bestanden. Maak daarna de “ brutaal ”-module om eventuele wijzigingen in nieuw aangemaakte mappen te bekijken via de “ sass – bekijk sass: css commando. Als gevolg van deze actie worden het bestand “SASS\SCSS” en twee “CSS”-bestanden automatisch gegenereerd in de map “CSS”. Als de gebruiker de “SASS\SCSS”-bestanden wijzigt, worden de nieuwe wijzigingen automatisch in de CSS-bestanden ingevoegd. In deze handleiding wordt de volledige procedure uitgelegd voor het opzetten van het Node.js SASS\SCSS-project.