Stileer reageer met behulp van Sass
Wat is Sass
Sass is 'n CSS-voorverwerker.
Sass-lêers word op die bediener uitgevoer en stuur CSS na die blaaier.
Jy kan meer oor Sass leer in ons Sass-tutoriaal .
Kan ek Sass gebruik?
As jy die create-react-app
in jou projek gebruik, kan jy Sass maklik in jou React-projekte installeer en gebruik.
Installeer Sass deur hierdie opdrag in jou terminaal uit te voer:
>npm i sass
Nou is jy gereed om Sass-lêers by jou projek in te sluit!
Skep 'n Sass-lêer
Skep 'n Sass-lêer op dieselfde manier as wat jy CSS-lêers skep, maar Sass-lêers het die lêeruitbreiding.scss
In Sass-lêers kan jy veranderlikes en ander Sass-funksies gebruik:
my-sass.scss:
Skep 'n veranderlike om die kleur van die teks te definieer:
$myColor: red;
h1 {
color: $myColor;
}
Voer die Sass-lêer in op dieselfde manier as wat jy 'n CSS-lêer ingevoer het:
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'));