Styling-Reaktion mit Sass
Was ist Sass
Sass ist ein CSS-Präprozessor.
Sass-Dateien werden auf dem Server ausgeführt und senden CSS an den Browser.
Mehr über Sass erfahren Sie in unserem Sass-Tutorial .
Kann ich Sass verwenden?
Wenn Sie create-react-appin Ihrem Projekt verwenden, können Sie Sass problemlos in Ihren React-Projekten installieren und verwenden.
Installieren Sie Sass, indem Sie diesen Befehl in Ihrem Terminal ausführen:
>npm i sass
Jetzt können Sie Sass-Dateien in Ihr Projekt aufnehmen!
Erstellen Sie eine Sass-Datei
Erstellen Sie eine Sass-Datei auf die gleiche Weise wie CSS-Dateien, aber Sass-Dateien haben die Dateierweiterung.scss
In Sass-Dateien können Sie Variablen und andere Sass-Funktionen verwenden:
my-sass.scss:
Erstellen Sie eine Variable, um die Farbe des Textes zu definieren:
$myColor: red;
h1 {
color: $myColor;
}Importieren Sie die Sass-Datei genauso wie Sie eine CSS-Datei importiert haben:
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import './my-sass.scss';
const Header = () => {
return (
<>
<h1>Hello Style!</h1>
<p>Add a little style!.</p>
</>
);
}
ReactDOM.render(<Header />, document.getElementById('root'));