Το Sass (συντακτικά φοβερά φύλλα στυλ) είναι μια επέκταση του CSS με πρόσθετες δυνατότητες που το καθιστούν πιο ισχυρό. Το καλύτερο πράγμα για το Sass είναι η συμβατότητά του με CSS, πράγμα που σημαίνει ότι μπορείτε να το χρησιμοποιήσετε στα έργα ανάπτυξης ιστού σας με πλαίσια JavaScript όπως το React.
Ωστόσο, σε αντίθεση με το vanilla CSS, χρειάζεστε λίγη ρύθμιση για να χρησιμοποιήσετε το Sass. Μάθετε πώς λειτουργεί αυτό ρυθμίζοντας ένα απλό έργο React.js και ενσωματώνοντας το Sass σε αυτό.
Πώς να χρησιμοποιήσετε το Sass στο έργο σας React.js
Όπως και άλλοι επεξεργαστές CSS, το Sass δεν υποστηρίζεται εγγενώς από το React. Για να χρησιμοποιήσετε το Sass στο React, πρέπει να εγκαταστήσετε μια εξάρτηση τρίτου μέρους μέσω ενός διαχειριστή πακέτων όπως το νήμα ή το npm.
Μπορείτε να ελέγξετε εάν το npm ή το νήμα είναι εγκατεστημένο στο τοπικό σας μηχάνημα τρέχοντας
npm -- έκδοση ή νήμα -- έκδοση. Εάν δεν βλέπετε έναν αριθμό έκδοσης στο τερματικό σας, εγκατάσταση npm ή το νήμα πρώτα.Δημιουργήστε ένα έργο React.js
Για να ακολουθήσετε αυτόν τον οδηγό, μπορείτε να ρυθμίσετε μια απλή εφαρμογή React.js χρησιμοποιώντας το create-react-app.
Αρχικά, χρησιμοποιήστε μια γραμμή εντολών για να πλοηγηθείτε στον φάκελο στον οποίο θέλετε να δημιουργήσετε το έργο React. Μετά τρέξε npx create-react-app . Μόλις ολοκληρωθεί η διαδικασία, εισαγάγετε τον κατάλογο της εφαρμογής χρησιμοποιώντας CD . Προσθέστε το παρακάτω περιεχόμενο στο δικό σας App.js αρχείο ως εκκίνηση:
εισαγωγή Αντιδρώ από "αντιδρώ";
εισαγωγή "./App.scss";
λειτουργίαApp() {
ΕΠΙΣΤΡΟΦΗ (
<div className="περικάλυμμα">
<h1>Χρήση Sass στο React</h1>
<κεφαλίδα className="περιτύλιγμα__btns">
<κουμπί>Μπλε κουμπί</button>
<κουμπί>Κόκκινο κουμπί</button>
<κουμπί>Πράσινο κουμπί</button>
</header>
</div> );
}
εξαγωγήΠροκαθορισμένο Εφαρμογή?Αφού ρυθμίσετε ένα βασικό έργο React, ήρθε η ώρα να ενσωματώσετε το Sass.
Εγκαταστήστε το Sass
Μπορείτε να εγκαταστήσετε το Sass μέσω npm ή νήμα. Τοποθετήστε το μέσω νήματος τρέχοντας νήμα προσθέτω σασσί ή, αν προτιμάτε npm, τρέξτε npm εγκατάσταση sass. Ο διαχειριστής πακέτων σας θα προσθέσει την πιο πρόσφατη έκδοση του Sass στη λίστα των εξαρτήσεων του έργου πακέτο.json αρχείο.
Μετονομάστε τα αρχεία .css σε .scss ή .sass
Στο φάκελο του έργου, μετονομάστε τα App.css και index.css σε App.scss και index.scss, αντίστοιχα.
Αφού μετονομάσετε αυτά τα αρχεία, πρέπει να ενημερώσετε τις εισαγωγές στα αρχεία App.js και index.js ώστε να αντιστοιχούν στις νέες επεκτάσεις αρχείων ως εξής:
εισαγωγή "./index.scss";
εισαγωγή "./App.scss";Από αυτό το σημείο και μετά, θα πρέπει να χρησιμοποιείτε την επέκταση .scss για οποιοδήποτε αρχείο στυλ δημιουργείτε.
Εισαγωγή και χρήση μεταβλητών και μικτών
Ένα από τα πιο σημαντικά πλεονεκτήματα του Sass είναι ότι σας βοηθά να γράψετε καθαρά, επαναχρησιμοποιήσιμα στυλ χρησιμοποιώντας μεταβλητές και μίξεις. Αν και μπορεί να μην είναι εμφανές πώς μπορείτε να κάνετε το ίδιο στο React, δεν διαφέρει τόσο από τη χρήση του Sass σε έργα γραμμένα με απλή JavaScript και HTML.
Πρώτα, δημιουργήστε ένα νέο Στυλ φάκελο στο δικό σας src ντοσιέ. Στο φάκελο Styles, δημιουργήστε δύο αρχεία: _variables.scss και _mixins.scss. Προσθέστε τους ακόλουθους κανόνες στο _variables.scss:
$background-color: #f06292;
$text-color: #f1d3b3;
$btn-width: 120px;
$btn-ύψος: 40px;
$block-padding: 60px;Και προσθέστε τα ακόλουθα στο _mixins.scss:
@mixin κατακόρυφη λίστα {
οθόνη: flex;
στοίχιση-στοιχεία: κέντρο;
flex-direction: στήλη;
}Στη συνέχεια, εισάγετε μεταβλητές και mixins στο App.scss ως εξής:
@εισαγωγή "./Στυλ/μεταβλητές";
@εισαγωγή "./Στυλ/μίξεις";Χρησιμοποιήστε τις μεταβλητές και τις μίξεις σας στο αρχείο App.scss:
@εισαγωγή "./Styles/variables.scss";
@εισαγωγή "./Στυλ/μίξεις";
.περικάλυμμα {
φόντο-χρώμα: $background-color;
χρώμα: $text-color;
padding: $block-padding;&__btns {
@περιλαμβάνω κατακόρυφος-λίστα;
κουμπί {
πλάτος: $btn-width;
ύψος: $btn-ύψος;
}
}
}
Έτσι χρησιμοποιείτε τις μεταβλητές και τα mixins στο React. Εκτός από μίξεις και μεταβλητές, μπορείτε επίσης να χρησιμοποιήσετε όλες τις άλλες εκπληκτικές δυνατότητες στο Sass, όπως λειτουργίες. Δεν υπάρχει περιορισμός.
Χρήση Sass στο React.js
Το Sass παρέχει περισσότερη λειτουργικότητα πάνω από το CSS, το οποίο είναι ακριβώς αυτό που χρειάζεστε για να γράψετε επαναχρησιμοποιήσιμο κώδικα CSS.
Μπορείτε να ξεκινήσετε να χρησιμοποιείτε το Sass στο React εγκαθιστώντας το πακέτο sass μέσω npm ή νήμα, ενημερώνοντας τα αρχεία CSS σε .scss ή .sass και, στη συνέχεια, ενημερώνοντας τις εισαγωγές σας για να χρησιμοποιήσετε τη νέα επέκταση αρχείου. Μετά από αυτό, μπορείτε να αρχίσετε να γράφετε SCSS στο React.
