React Sass

Sass (Syntactically Awesome Stylesheets) est un préprocesseur CSS.

Sass vous permet d'utiliser des fonctionnalités qui n'existent pas encore en CSS, telles que les variables, les règles imbriquées, les mixins, les fonctions, etc.

Les fichiers Sass sont exécutés sur le serveur, et le CSS généré est envoyé au navigateur.

Vous pouvez en savoir plus sur Sass dans notreTutoriel Sasspour plus d'informations sur Sass.

Installer Sass

Exécutez la commande suivante dans le terminal pour installer Sass :

npm i sass

Maintenant, vous êtes prêt à inclure des fichiers Sass dans votre projet !

Créer un fichier Sass

La façon de créer un fichier Sass est la même que de créer un fichier CSS, mais l'extension d'un fichier Sass est.scss。

Dans un fichier Sass, vous pouvez utiliser des variables et d'autres fonctionnalités Sass.

Exemple

Créez une variable pour définir la couleur du texte :

Code du fichier my-sass.scss :

my-sass.scss

$myColor: red;

h1 {
  color: $myColor;
}

Importez le fichier Sass exactement comme vous importez un fichier CSS :

Exemple

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

const Header = () => {
  return (
    <>
      <h1>Bonjour Style!</h1>
      <p>Ajoutez un peu de style!.</p>
    </>
  );
}

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

Dans le code ci-dessus, nous avons créé un fichier Sassmy-sass.scsset utilisé une variable Sass dans celui-ci$myColorpour définirh1la couleur. Ensuite, nousindex.jsimporté ce fichier Sass de la même manière qu'un fichier CSS normal, et dansHeaderle composant a utilisé ces styles.

Autres extensions