Styling Reagisci Usando Sass

❮ Precedente Prossimo ❯

Cos'è il Sass

Sass è un preprocessore CSS.

I file Sass vengono eseguiti sul server e inviano CSS al browser.

Puoi saperne di più su Sass nel nostro Sass Tutorial .

Posso usare Sass?

Se usi il create-react-appnel tuo progetto, puoi facilmente installare e utilizzare Sass nei tuoi progetti React.

Installa Sass eseguendo questo comando nel tuo terminale:

>npm i sass

Ora sei pronto per includere i file Sass nel tuo progetto!

Crea un file Sass

Crea un file Sass nello stesso modo in cui crei i file CSS, ma i file Sass hanno l'estensione del file.scss

Nei file Sass puoi usare variabili e altre funzioni Sass:

my-sass.scss:

Crea una variabile per definire il colore del testo:

$myColor: red;

h1 {
  color: $myColor;
}

Importa il file Sass nello stesso modo in cui hai importato un file CSS:

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'));