Sass (syntaktisch großartige 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 zu verwenden. Finden Sie heraus, wie das funktioniert, indem Sie ein einfaches React.js-Projekt einrichten und Sass darin integrieren.
So verwenden Sie Sass in Ihrem React.js-Projekt
Wie andere CSS-Prozessoren wird Sass von React nicht nativ unterstützt. Um Sass in React zu verwenden, müssen Sie eine Drittanbieter-Abhängigkeit über einen Paketmanager wie Garn oder npm installieren.
Sie können überprüfen, ob npm oder Garn auf Ihrem lokalen Computer installiert ist, indem Sie ausführen
npm --version oder Garn - Version. Wenn Sie in Ihrem Terminal keine Versionsnummer sehen, npm installieren oder Garn zuerst.Erstellen Sie ein React.js-Projekt
Um dieser Anleitung zu folgen, können Sie mit create-react-app eine einfache React.js-App einrichten.
Verwenden Sie zunächst eine Befehlszeile, um zu dem Ordner zu navigieren, in dem Sie Ihr React-Projekt erstellen möchten. Dann renne npx create-react-app . Wenn der Vorgang abgeschlossen ist, geben Sie das App-Verzeichnis mit ein CD . Fügen Sie den folgenden Inhalt zu Ihrer hinzu App.js Datei als Starter:
importieren Reagieren aus "reagieren";
importieren "./App.scss";
FunktionApp() {
zurückkehren (
<div Klassenname="Verpackung">
<h1>Verwendung von Sass in React</h1>
<Header Klassenname="Wrapper__btns">
<Taste>Blauer Knopf</button>
<Taste>Roter Knopf</button>
<Taste>Grüner Knopf</button>
</header>
</div> );
}
ExportStandard Anwendung;Sobald Sie ein einfaches React-Projekt eingerichtet haben, ist es an der Zeit, Sass zu integrieren.
Installieren Sie Sass
Sie können Sass über npm oder Garn installieren. Installieren Sie es über das Garn, indem Sie es ausführen Garn hinzufügen Sass oder, wenn Sie npm bevorzugen, führen Sie es aus npm installiert sass. Ihr Paketmanager fügt die neueste Version von Sass der Liste der Abhängigkeiten in den Projekten hinzu Paket.json Datei.
Benennen Sie .css-Dateien in .scss oder .sass um
Benennen Sie im Ordner des Projekts 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:
importieren "./index.scss";
importieren "./App.scss";Von diesem Punkt an sollten Sie die Erweiterung .scss für jede Stildatei verwenden, die Sie erstellen.
Importieren und Verwenden von Variablen und Mixins
Einer der bedeutendsten Vorteile von Sass ist, dass es Ihnen hilft, saubere, wiederverwendbare Stile mit Variablen und Mixins zu schreiben. Auch wenn es nicht offensichtlich ist, wie Sie dasselbe in React tun 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 eine neue Stile Ordner in Ihrem Quelle Ordner. Erstellen Sie im Ordner Styles zwei Dateien: _variablen.scss Und _mixins.scss. Fügen Sie _variables.scss die folgenden Regeln hinzu:
$Hintergrundfarbe: #f06292;
$textfarbe: #f1d3b3;
$btn-Breite: 120Pixel;
$btn-Höhe: 40Pixel;
$block-Padding: 60Pixel;Und fügen Sie Folgendes zu _mixins.scss hinzu:
@mixin vertikale Liste {
Anzeige: Flex;
Ausrichtungselemente: Mitte;
Biegerichtung: Säule;
}Importieren Sie dann Variablen und Mixins in App.scss wie folgt:
@importieren "./Stile/Variablen";
@importieren "./Stile/Mixins";Verwenden Sie Ihre Variablen und Mixins in der App.scss-Datei:
@importieren "./Stile/Variablen.scss";
@importieren "./Stile/Mixins";
.Verpackung {
Hintergrundfarbe: $Hintergrundfarbe;
Farbe: $Textfarbe;
Polsterung: $block-Padding;&__btns {
@enthalten Vertikale-Liste;
Taste {
Breite: $btn-Breite;
Höhe: $btn-Höhe;
}
}
}
So verwenden Sie Variablen und Mixins in React. Neben Mixins und Variablen können Sie auch alle anderen großartigen Features in Sass verwenden, wie z. B. Funktionen. Es gibt keine Einschränkung.
Verwendung von Sass in React.js
Sass bietet mehr Funktionalität zusätzlich zu CSS, was genau das ist, was Sie brauchen, um wiederverwendbaren CSS-Code zu schreiben.
Sie können mit der Verwendung von Sass in React beginnen, indem Sie das sass-Paket über npm oder Garn 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.