I lettori come te aiutano a sostenere MUO. Quando effettui un acquisto utilizzando i link sul nostro sito, potremmo guadagnare una commissione di affiliazione. Per saperne di più.

Sass (fogli di stile sintatticamente fantastici) è un'estensione di CSS con funzionalità aggiuntive che lo rendono più potente. La cosa migliore di Sass è la sua compatibilità con i CSS, il che significa che puoi usarlo nei tuoi progetti di sviluppo web con framework JavaScript come React.

Tuttavia, a differenza del CSS vanilla, hai bisogno di un po' di configurazione per usare Sass. Scopri come funziona impostando un semplice progetto React.js e integrando Sass con esso.

Come usare Sass nel tuo progetto React.js

Come altri processori CSS, Sass non è supportato nativamente da React. Per utilizzare Sass in React, devi installare una dipendenza di terze parti tramite un gestore di pacchetti come yarn o npm.

Puoi verificare se npm o yarn sono installati sul tuo computer locale eseguendo npm --versione O filato --versione. Se non vedi un numero di versione nel tuo terminale, installa npm o filato prima.

instagram viewer

Crea un progetto React.js

Per seguire questa guida, puoi configurare una semplice app React.js usando create-react-app.

Innanzitutto, usa una riga di comando per navigare fino alla cartella in cui vuoi creare il tuo progetto React. Quindi corri npx crea-reagisci-app . Al termine del processo, accedi alla directory dell'app utilizzando CD . Aggiungi il seguente contenuto al tuo App.js file come antipasto:

importare Reagire da "reagire";
importare "./App.scss";
funzioneApp() {
ritorno (
<nomeclasse div="involucro">
<h1>Usare Sass in React</h1>
<intestazione className="wrapper__btns">
<pulsante>Pulsante blu</button>
<pulsante>Pulsante rosso</button>
<pulsante>Pulsante verde</button>
</header>
</div> );
}
esportarepredefinito Applicazione;

Dopo aver impostato un progetto React di base, è il momento di integrare Sass.

Installa Sass

Puoi installare Sass tramite npm o filato. Installalo tramite filo correndo il filato aggiunge sfacciataggine o, se preferisci npm, esegui npm installa sass. Il tuo gestore di pacchetti aggiungerà l'ultima versione di Sass all'elenco delle dipendenze nel progetto pacchetto.json file.

Rinominare i file .css in .scss o .sass

Nella cartella del progetto, rinomina rispettivamente App.css e index.css in App.scss e index.scss.

Dopo aver rinominato i file, devi aggiornare le importazioni nei file App.js e index.js in modo che corrispondano alle nuove estensioni di file come segue:

importare "./index.scss";
importare "./App.scss";

Da questo punto in avanti, dovresti usare l'estensione .scss per qualsiasi file di stile che crei.

Importazione e utilizzo di variabili e mixin

Uno dei più significativi vantaggi di Sass è che ti aiuta a scrivere stili puliti e riutilizzabili usando variabili e mixin. Anche se potrebbe non essere chiaro come puoi fare lo stesso in React, non è così diverso dall'usare Sass in progetti scritti con semplici JavaScript e HTML.

Innanzitutto, creane uno nuovo Stili cartella nel tuo src cartella. Nella cartella Stili, crea due file: _variabili.scss E _mixins.scss. Aggiungi le seguenti regole a _variables.scss:

$colore-sfondo: #f06292;
$testo-colore: #f1d3b3;
$ miliardi di larghezza: 120px;
$ btn-altezza: 40px;
$block-padding: 60px;

E aggiungi quanto segue a _mixins.scss:

@mixin elenco-verticale {
display: flessibile;
align-items: centro;
direzione flessibile: colonna;
}

Quindi importa variabili e mixin in App.scss come segue:

@importare "./Stili/variabili";
@importare "./Stili/mixin";

Usa le tue variabili e mixin nel file App.scss:

@importare "./Stili/variabili.scss";
@importare "./Stili/mixin";
.involucro {
colore-di-sfondo: $colore-di-sfondo;
colore: $testo-colore;
padding: $block-padding;

&__btns {
@includere verticale-elenco;
pulsante {
larghezza: $btn-larghezza;
altezza: $btn-altezza;
}
}
}

È così che usi variabili e mixin in React. Oltre a mixin e variabili, puoi anche utilizzare tutte le altre fantastiche funzionalità di Sass, come le funzioni. Non ci sono limitazioni.

Utilizzo di Sass in React.js

Sass fornisce più funzionalità oltre ai CSS, che è esattamente ciò di cui avrai bisogno per scrivere codice CSS riutilizzabile.

Puoi iniziare a utilizzare Sass in React installando il pacchetto sass tramite npm o yarn, aggiornando i tuoi file CSS in .scss o .sass, quindi aggiornando le tue importazioni per utilizzare la nuova estensione di file. Successivamente, puoi iniziare a scrivere SCSS in React.