Αυτός ο οδηγός θα απεικονίσει την πλήρη διαδικασία για τη ρύθμιση ενός γρήγορου έργου Node.js SASS/SCSS.
Πώς να ρυθμίσετε ένα Fast Node.js Sass/SCSS Project;
Το SASS χρησιμοποιεί καθαρές ιδιότητες CSS για την εκτέλεση styling στο επιλεγμένο στοιχείο. Ενισχύει το αρχικό CSS συμπεριλαμβάνοντας τα μαθηματικά και τις μεταβλητές δυνατότητες. Εφαρμόζει το στυλ στο DOM σε μια ιεραρχία. Με την ενσωμάτωση του SASS με το Node.js, ο προγραμματιστής μπορεί πολύ εύκολα να διαμορφώσει το έργο ώστε να το κάνει πιο εντυπωσιακό και τέλειο ως προς τα pixel.
Ας ακολουθήσουμε τα παρακάτω βήματα για να ρυθμίσουμε ένα έργο Node.js κατά μήκος του SASS/SCSS.
Βήμα 1: Εγκατάσταση 'SASS'
Πρώτα, εγκαταστήστε το ' SASS ' καθολικά στο έργο Node.js χρησιμοποιώντας τον διαχειριστή πακέτων κόμβου ' npm ” μέσω αυτής της εντολής:
npm εγκατάσταση -g sass
Η έξοδος δείχνει ότι « saas ” έχει εγκατασταθεί το πακέτο:
Βήμα 2: Δημιουργία καταλόγων
Στη συνέχεια, δημιουργήστε ξεχωριστούς καταλόγους για αρχεία CSS και SCSS χρησιμοποιώντας την ακόλουθη εντολή 'mkdir':
mkdir cssFiles
mkdir scssFiles
Μπορεί να φανεί ότι τα παραπάνω « mkdir Η εντολή ' δημιούργησε το ' cssFiles ' και ' scssFiles ” καταλόγους:
Βήμα 3: Συνδέστε τη μονάδα SASS
Τώρα, χρησιμοποιήστε το ' sass ' ενότητα για να παρακολουθείτε τυχόν τροποποιήσεις στα αρχεία του ' scssFiles ' Ευρετήριο. Σε περίπτωση τροποποίησης, θα δημιουργήσει αυτόματα αρχεία CSS μέσα στο συνδεδεμένο ' cssFiles » και εισάγετε τα ίδια δεδομένα scss στο αρχείο CSS.
Η εντολή που πρέπει να εκτελεστεί για την παρακολούθηση και τη σύνδεση του ' sass » η ενότητα έχει ως εξής:
sass --παρακολουθώ scssFiles : cssFilesΤώρα, η saas παρακολουθεί για κάθε είδους τροποποιήσεις στον κατάλογο scssFiles.
Σημείωση: Η παραπάνω εντολή θα πρέπει να εκτελεστεί στη γραμμή εντολών του συστήματος, καθώς δεν θα λειτουργήσει σε τερματικά εργαλείων όπως ο κώδικας του Visual Studio.
Βήμα 4: Δημιουργία SCSS και αντίστοιχων αρχείων CSS
Σε αυτό το βήμα, ένα κενό αρχείο με το όνομα ' scssStyle ' με ' scss 'η επέκταση δημιουργείται μέσα στο ' scssFiles ' Ευρετήριο:
Μετά από αυτό, δύο αρχεία με το όνομα ' scssStyle.css ' και ' scssStyle.css.map ' δημιουργούνται αυτόματα από το ' sass ' ενότητα μέσα στο ' cssFiles » κατάλογο, όπως φαίνεται παρακάτω:
Βήμα 5: Εισαγωγή κώδικα
Τέλος, εισάγετε κάποιο κωδικό SCSS μέσα στο ' scssStyle.scss ' όπως φαίνεται παρακάτω:
Τώρα, ο ίδιος κώδικας σε μορφή CSS εισάγεται αυτόματα μέσα στο ' scssStyle.css ' αρχείο:
Ας απεικονίσουμε οπτικά τα βήματα 4 και 5 με τη βοήθεια του gif:
Αυτός ο οδηγός έχει εξηγήσει τα βήματα για τη δημιουργία του έργου Node.js SASS\SCSS.
συμπέρασμα
Για να ρυθμίσετε ένα γρήγορο έργο Node.js SASS/SCSS, εγκαταστήστε πρώτα τη λειτουργική μονάδα ' sass ' ενότητα και, στη συνέχεια, δημιουργήστε δύο καταλόγους έναν για ' SASS\SCSS 'αρχείο και άλλο για ' CSS ” αρχεία. Μετά από αυτό, κάντε το ' sass ' ενότητα για παρακολούθηση οποιασδήποτε τροποποίησης σε καταλόγους που δημιουργήθηκαν πρόσφατα μέσω του ' sass –παρακολουθήστε sass:css ' εντολή. Ως αποτέλεσμα αυτής της ενέργειας, το αρχείο 'SASS\SCSS' και δύο αρχεία 'CSS' δημιουργούνται αυτόματα στο φάκελο 'CSS'. Εάν ο χρήστης τροποποιήσει τα αρχεία «SASS\SCSS», τότε οι νέες αλλαγές θα εισαχθούν αυτόματα στα αρχεία CSS. Αυτός ο οδηγός έχει εξηγήσει την πλήρη διαδικασία για τη ρύθμιση του έργου Node.js SASS\SCSS.