React Sass

Sass (Syntactically Awesome Stylesheets) ist ein CSS-Präprozessor.

Sass ermöglicht Ihnen die Nutzung von Features, die in CSS noch nicht existieren, wie Variablen, verschachtelte Regeln, Mixins, Funktionen und so weiter.

Sass-Dateien werden auf dem Server ausgeführt, und das generierte CSS wird an den Browser gesendet.

Mehr über Sass erfahren Sie in unseremSass-Tutorialfür weitere Informationen über Sass.

Sass installieren

Führen Sie den folgenden Befehl im Terminal aus, um Sass zu installieren:

npm i sass

Jetzt können Sie Sass-Dateien in Ihr Projekt einbinden!

Eine Sass-Datei erstellen

Die Vorgehensweise zum Erstellen einer Sass-Datei ist dieselbe wie beim Erstellen einer CSS-Datei, aber die Dateiendung einer Sass-Datei ist.scss。

In einer Sass-Datei können Sie Variablen und andere Sass-Funktionen verwenden.

Beispiel

Erstellen Sie eine Variable, um die Farbe des Textes zu definieren:

Code der Datei my-sass.scss:

my-sass.scss

$myColor: red;

h1 {
  color: $myColor;
}

Importieren Sie die Sass-Datei genauso wie eine CSS-Datei:

Beispiel

import React from 'react';
import ReactDOM from 'react-dom/client';
import './my-sass.scss';

const Header = () => {
  return (
    <>
      <h1>Hallo Style!</h1>
      <p>Ein wenig Stil hinzufügen!.</p>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Header />);

Im obigen Code haben wir eine Sass-Datei erstelltmy-sass.scssund darin eine Sass-Variable verwendet$myColorzu definierenh1die Farbe. Dann haben wirindex.jsdiese Sass-Datei auf die gleiche Weise wie eine normale CSS-Datei importiert und inHeaderder Komponente diese Stile verwendet.

Andere Erweiterungen