Questa guida illustrerà la procedura completa per impostare un progetto SASS/SCSS veloce Node.js.
Come impostare un progetto Sass/SCSS veloce Node.js?
SASS utilizza proprietà CSS pure per eseguire lo styling sull'elemento selezionato. Potenzia il CSS originale includendo la matematica e le funzionalità variabili. Applica lo stile al DOM in una gerarchia. Integrando SASS con Node.js, lo sviluppatore può modellare il progetto molto facilmente per renderlo più accattivante e pixel perfetto.
Seguiamo i passaggi seguenti per impostare un progetto Node.js lungo SASS/SCSS.
Passaggio 1: installazione di “SASS”
Per prima cosa installa “ SASS ' a livello globale nel progetto Node.js utilizzando il gestore pacchetti del nodo ' npm 'attraverso questo comando:
npm install -g sass
L'output mostra che ' saas 'il pacchetto è stato installato:
Passaggio 2: creazione di directory
Successivamente, crea directory separate per i file CSS e SCSS utilizzando il seguente comando 'mkdir':
mkdir cssFiles
mkdir scssFiles
Si può notare che quanto sopra “ mkdir Il comando ha creato il ' cssFiles ' E ' scssFiles ' directory:
Passaggio 3: collega il modulo SASS
Ora usa il ' sfacciataggine ' modulo per controllare eventuali modifiche nei file residenti del ' scssFiles 'rubrica. In caso di modifica, creerà automaticamente file CSS all’interno del link “ cssFiles ' e inserisci gli stessi dati scss nel file CSS.
Il comando da eseguire per guardare e collegare il “ sfacciataggine ' il modulo è il seguente:
sfacciataggine --orologio scssFiles : cssFilesOra, saas sta controllando tutti i tipi di modifiche nella directory scssFiles.
Nota: Il comando precedente deve essere eseguito sul prompt dei comandi del sistema poiché non funzionerà su terminali di strumenti come il codice di Visual Studio.
Passaggio 4: creazione di file SCSS e CSS corrispondenti
In questo passaggio, un file vuoto denominato ' scssStyle ' con ' scss L'estensione ' viene creata all'interno del ' scssFiles 'cartella:
Successivamente, due file con il nome “ scssStyle.css ' E ' scssStyle.css.map ' vengono creati automaticamente da ' sfacciataggine ' all'interno del modulo ' cssFiles ', come mostrato di seguito:
Passaggio 5: inserimento del codice
Infine, inserisci un codice SCSS all'interno del campo ' scssStyle.scss ' come mostrato di seguito:
Ora, lo stesso codice nel formato CSS viene automaticamente inserito all'interno del ' scssStyle.css ' file:
Illustriamo visivamente i passaggi 4 e 5 con l'aiuto di gif:
Questa guida ha spiegato i passaggi per creare il progetto Node.js SASS\SCSS.
Conclusione
Per impostare un progetto SASS/SCSS Node.js veloce, installare prima il modulo “ sfacciataggine ', quindi creare due directory una per ' SASS\SCSS ' e un altro per ' CSS ' File. Successivamente, crea il ' sfacciataggine ' per osservare qualsiasi modifica nelle directory appena create attraverso il modulo ' sass –guarda sass:css 'comando. Come risultato di questa azione, il file “SASS\SCSS” e due file “CSS” vengono generati automaticamente nella cartella “CSS”. Se l'utente modifica i file “SASS\SCSS”, le nuove modifiche verranno automaticamente inserite nei file CSS. Questa guida ha spiegato la procedura completa per impostare il progetto Node.js SASS\SCSS.