So verwenden Sie Sass in React

Sass ist eine verbesserte Version von CSS, die Sie jetzt in Ihren React-Projekten verwenden können.

Sass (syntaktisch beeindruckende Stylesheets) ist eine Erweiterung von CSS mit zusätzlichen Funktionen, die es leistungsfähiger machen. Das Beste an Sass ist seine Kompatibilität mit CSS, was bedeutet, dass Sie es in Ihren Webentwicklungsprojekten mit JavaScript-Frameworks wie React verwenden können.

Im Gegensatz zu Vanilla-CSS benötigen Sie jedoch ein wenig Setup, um Sass verwenden zu können. Finden Sie heraus, wie das funktioniert, indem Sie ein einfaches React.js-Projekt einrichten und Sass darin integrieren.

Wie andere CSS-Prozessoren wird Sass von React nicht nativ unterstützt. Um Sass in React verwenden zu können, müssen Sie eine Drittanbieter-Abhängigkeit über einen Paketmanager wie Yarn oder NPM installieren.

Sie können überprüfen, ob npm oder Yarn auf Ihrem lokalen Computer installiert ist, indem Sie Folgendes ausführennpm --versionoderGarn --Version . Wenn in Ihrem Terminal keine Versionsnummer angezeigt wird, installieren Sie zuerst npm oder Yarn.

Um dieser Anleitung zu folgen, können Sie mit create-react-app eine einfache React.js-App einrichten.

Navigieren Sie zunächst über eine Befehlszeile zu dem Ordner, in dem Sie Ihr React-Projekt erstellen möchten. Führen Sie es dann ausnpx create-react-app . Sobald der Vorgang abgeschlossen ist, rufen Sie das App-Verzeichnis mit aufcd . Fügen Sie den folgenden Inhalt zu Ihrem hinzuApp.jsDatei als Starter:

Sobald Sie ein grundlegendes React-Projekt eingerichtet haben, ist es Zeit, Sass zu integrieren.

Sie können Sass über npm oder Yarn installieren. Installieren Sie es über Garn, indem Sie es ausführenGarn sass hinzufügenoder, wenn Sie npm bevorzugen, führen Sie es ausnpm sass installieren . Ihr Paketmanager fügt die neueste Version von Sass zur Liste der Abhängigkeiten im Projekt hinzupackage.jsonDatei.

Benennen Sie im Projektordner App.css und index.css in App.scss bzw. index.scss um.

Nachdem Sie diese Dateien umbenannt haben, müssen Sie die Importe in Ihren App.js- und index.js-Dateien wie folgt aktualisieren, damit sie mit den neuen Dateierweiterungen übereinstimmen:

Ab diesem Zeitpunkt sollten Sie für jede von Ihnen erstellte Stildatei die Erweiterung .scss verwenden.

Einer der größten Vorteile von Sass besteht darin, dass es Ihnen hilft, saubere, wiederverwendbare Stile mithilfe von Variablen und Mixins zu schreiben. Auch wenn es vielleicht nicht offensichtlich ist, wie Sie dasselbe in React erreichen können, unterscheidet es sich nicht so sehr von der Verwendung von Sass in Projekten, die mit einfachem JavaScript und HTML geschrieben wurden.

Erstellen Sie zunächst ein neuesStileOrdner in Ihremsrc Ordner. Erstellen Sie im Ordner „Styles“ zwei Dateien:_variables.scssUnd_mixins.scss . Fügen Sie _variables.scss die folgenden Regeln hinzu:

Und fügen Sie Folgendes zu _mixins.scss hinzu:

Importieren Sie dann Variablen und Mixins wie folgt in App.scss:

Verwenden Sie Ihre Variablen und Mixins in der App.scss-Datei:

So verwenden Sie Variablen und Mixins in React. Neben Mixins und Variablen können Sie auch alle anderen tollen Funktionen in Sass verwenden, wie zum Beispiel Funktionen. Es gibt keine Einschränkung.

Sass bietet zusätzlich zu CSS weitere Funktionen, die genau das sind, was Sie zum Schreiben von wiederverwendbarem CSS-Code benötigen.

Sie können Sass in React verwenden, indem Sie das Sass-Paket über npm oder Yarn installieren, Ihre CSS-Dateien auf .scss oder .sass aktualisieren und dann Ihre Importe aktualisieren, um die neue Dateierweiterung zu verwenden. Danach können Sie mit dem Schreiben von SCSS in React beginnen.

Alvin Wanjala ist Senior Writer für Android bei MakeUseOf und Softwareentwickler. Als begeisterter Android-Nutzer, der sich in das Ökosystem verliebte, nachdem er 2013 sein erstes Gerät bekam, konzentriert er sich darauf, Benutzern dabei zu helfen, das Beste aus ihren Geräten herauszuholen. Aber als Technikbegeisterter, der täglich mehrere Plattformen nutzt, deckt er auch iOS, Mac, soziale Medien und andere Themen im breiten Spektrum der Verbrauchertechnologie ab. Alvin begann 2018 in seinem persönlichen Technikblog zu schreiben und begann 2019 beruflich bei TechTrendsKE, wo Er berichtete über allgemeine Technologienachrichten und Produktrezensionen. Seitdem wurde seine Arbeit auf XDA Developers und mehreren anderen Technologie-Websites vorgestellt. Neben dem Schreiben strebt er einen zweiten Abschluss in IT mit Schwerpunkt auf Softwareentwicklung an.