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