Sass (feuilles de style syntaxiquement impressionnantes) est une extension de CSS avec des fonctionnalités supplémentaires qui le rendent plus puissant. La meilleure chose à propos de Sass est sa compatibilité avec CSS, ce qui signifie que vous pouvez l'utiliser dans vos projets de développement Web avec des frameworks JavaScript comme React.
Cependant, contrairement au CSS vanille, vous avez besoin d'un peu de configuration pour utiliser Sass. Découvrez comment cela fonctionne en configurant un projet React.js simple et en y intégrant Sass.
Comment utiliser Sass dans votre projet React.js
Comme les autres processeurs CSS, Sass n'est pas supporté nativement par React. Pour utiliser Sass dans React, vous devez installer une dépendance tierce via un gestionnaire de packages comme yarn ou npm.
Vous pouvez vérifier si npm ou yarn est installé sur votre machine locale en exécutant
npm --version ou fil --version. Si vous ne voyez pas de numéro de version dans votre terminal, installer npm ou le fil d'abord.Créer un projet React.js
Pour suivre ce guide, vous pouvez configurer une application React.js simple à l'aide de create-react-app.
Tout d'abord, utilisez une ligne de commande pour accéder au dossier dans lequel vous souhaitez créer votre projet React. Puis cours npx créer-réagir-app . Une fois le processus terminé, entrez dans le répertoire de l'application en utilisant CD . Ajoutez le contenu suivant à votre App.js fichier en entrée :
importer Réagir depuis "réagir";
importer "./App.scss";
fonctionApplication() {
retour (
<div nom_classe="emballage">
<h1>Utiliser Sass dans React</h1>
<en-tête className="wrapper__btns">
<bouton>Bouton bleu</button>
<bouton>Bouton rouge</button>
<bouton>Bouton vert</button>
</header>
</div> );
}
exporterdéfaut application ;Une fois que vous avez configuré un projet React de base, il est temps d'intégrer Sass.
Installer Sass
Vous pouvez installer Sass via npm ou yarn. Installez-le via le fil en exécutant fil ajouter du culot ou, si vous préférez npm, exécutez npm installer sass. Votre gestionnaire de paquets ajoutera la dernière version de Sass à la liste des dépendances dans le dossier du projet. package.json déposer.
Renommer les fichiers .css en .scss ou .sass
Dans le dossier du projet, renommez respectivement App.css et index.css en App.scss et index.scss.
Après avoir renommé ces fichiers, vous devez mettre à jour les importations dans vos fichiers App.js et index.js pour qu'elles correspondent aux nouvelles extensions de fichier comme suit :
importer "./index.scss";
importer "./App.scss";À partir de maintenant, vous devez utiliser l'extension .scss pour tout fichier de style que vous créez.
Importation et utilisation de variables et de mixins
L'un des plus significatifs avantages de Sass est qu'il vous aide à écrire des styles propres et réutilisables à l'aide de variables et de mixins. Bien qu'il ne soit pas évident de savoir comment vous pouvez faire la même chose dans React, ce n'est pas si différent de l'utilisation de Sass dans des projets écrits avec du JavaScript et du HTML simples.
Tout d'abord, créez un nouveau modes dossier dans votre src dossier. Dans le dossier Styles, créez deux fichiers: _variables.scss et _mixins.scss. Ajoutez les règles suivantes à _variables.scss :
$couleur de fond: #f06292 ;
$texte-couleur: #f1d3b3 ;
$btn-width: 120px ;
$btn-hauteur: 40px ;
$block-padding: 60px ;Et ajoutez ce qui suit à _mixins.scss :
@mixin liste-verticale {
affichage: flexible ;
align-items: center ;
flex-direction: colonne ;
}Importez ensuite les variables et les mixins dans App.scss comme suit :
@importer "./Styles/variables";
@importer "./Styles/mixins";Utilisez vos variables et mixins dans le fichier App.scss :
@importer "./Styles/variables.scss";
@importer "./Styles/mixins";
.emballage {
couleur de fond: $couleur de fond ;
couleur: $text-color ;
remplissage: $block-padding ;&__btns {
@inclure vertical-liste;
bouton {
largeur: $btn-largeur ;
hauteur: $btn-hauteur ;
}
}
}
C'est ainsi que vous utilisez les variables et les mixins dans React. Outre les mixins et les variables, vous pouvez également utiliser toutes les autres fonctionnalités impressionnantes de Sass, comme les fonctions. Il n'y a pas de limitation.
Utilisation de Sass dans React.js
Sass fournit plus de fonctionnalités en plus de CSS, ce qui est exactement ce dont vous aurez besoin pour écrire du code CSS réutilisable.
Vous pouvez commencer à utiliser Sass dans React en installant le package sass via npm ou yarn, en mettant à jour vos fichiers CSS vers .scss ou .sass, puis en mettant à jour vos importations pour utiliser la nouvelle extension de fichier. Après cela, vous pouvez commencer à écrire SCSS dans React.
