Styling Reageren met Sass

Wat is Sass

Sass is een CSS-preprocessor.

Sass-bestanden worden uitgevoerd op de server en sturen CSS naar de browser.

U kunt meer over Sass leren in onze Sass-zelfstudie .

Kan ik Sass gebruiken?

Als u de create-react-appin uw project gebruikt, kunt u Sass eenvoudig installeren en gebruiken in uw React-projecten.

Installeer Sass door deze opdracht in uw terminal uit te voeren:

>npm i sass

Nu bent u klaar om Sass-bestanden in uw project op te nemen!

Maak een Sass-bestand

Maak een Sass-bestand op dezelfde manier als u CSS-bestanden maakt, maar Sass-bestanden hebben de bestandsextensie.scss

In Sass-bestanden kun je variabelen en andere Sass-functies gebruiken:

mijn-sass.scss:

Maak een variabele om de kleur van de tekst te definiëren:

$myColor: red;

h1 {
  color: $myColor;
}

Importeer het Sass-bestand op dezelfde manier als waarop u een CSS-bestand hebt geïmporteerd:

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

❮ Vorig Volgende ❯

Reageren Tutorial