Come usare Sass in React

Sass è una versione migliorata di CSS che puoi utilizzare subito nei tuoi progetti React.

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

Tuttavia, a differenza dei CSS vanilla, è necessaria un po' di configurazione per utilizzare Sass. Scopri come funziona impostando un semplice progetto React.js e integrando Sass con esso.

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 eseguendonpm --versionOfilato --versione . Se non vedi un numero di versione nel tuo terminale, installa prima npm o Yarn.

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

Innanzitutto, utilizza una riga di comando per accedere alla cartella in cui desideri creare il tuo progetto React. Quindi eseguinpx create-react-app . Una volta terminato il processo, accedi alla directory dell'app utilizzandocd . Aggiungi il seguente contenuto al tuoApp.jsfile come antipasto:

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

Puoi installare Sass tramite npm o Yarn. Installalo tramite filo correndoil filo aggiunge sfacciataggineoppure, se preferisci npm, eseguinpm installa sass . Il tuo gestore pacchetti aggiungerà l'ultima versione di Sass all'elenco delle dipendenze nel progettopacchetto.jsonfile.

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

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

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

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

Per prima cosa, creane uno nuovoStilicartella nel tuosrc cartella. Nella cartella Stili, crea due file:_variabili.scssE_mixins.scss . Aggiungi le seguenti regole a _variables.scss:

E aggiungi quanto segue a _mixins.scss:

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

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

Ecco come usi variabili e mixin in React. Oltre ai mixin e alle variabili, puoi anche utilizzare tutte le altre fantastiche funzionalità di Sass, come le funzioni. Non ci sono limitazioni.

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 a .scss o .sass, quindi aggiornando le tue importazioni per utilizzare la nuova estensione di file. Successivamente, puoi iniziare a scrivere SCSS in React.

Alvin Wanjala è uno scrittore senior per Android presso MakeUseOf e uno sviluppatore di software. Essendo un appassionato utente Android che si è innamorato dell'ecosistema dopo aver acquistato il suo primo dispositivo nel 2013, il suo obiettivo è aiutare gli utenti a ottenere il massimo dai propri dispositivi. Ma essendo un appassionato di tecnologia che utilizza più piattaforme ogni giorno, si occupa anche di iOS, Mac, social media e altri argomenti nell'ampio spettro della tecnologia di consumo. Alvin ha iniziato a scrivere nel 2018 sul suo blog tecnologico personale e a livello professionale nel 2019 presso TechTrendsKE, dove ha coperto notizie generali sulla tecnologia e recensioni di prodotti. Da allora, il suo lavoro è stato presentato su XDA Developers e su numerosi altri siti Web tecnologici. Oltre a scrivere, sta conseguendo una seconda laurea in IT, concentrandosi sullo sviluppo di software.