Styling React Using Sass

Co je Sass

Sass je předprocesor CSS.

Soubory Sass se spouštějí na serveru a odesílají CSS do prohlížeče.

Více o Sass se můžete dozvědět v našem Sass Tutorial .

Mohu použít Sass?

Pokud používáte create-react-appve svém projektu, můžete snadno nainstalovat a používat Sass ve svých projektech React.

Nainstalujte Sass spuštěním tohoto příkazu ve vašem terminálu:

>npm i sass

Nyní jste připraveni zahrnout soubory Sass do svého projektu!

Vytvořte soubor Sass

Vytvořte soubor Sass stejným způsobem jako soubory CSS, ale soubory Sass mají příponu souboru.scss

V souborech Sass můžete používat proměnné a další funkce Sass:

my-sass.scss:

Vytvořte proměnnou pro definování barvy textu:

$myColor: red;

h1 {
  color: $myColor;
}

Importujte soubor Sass stejným způsobem, jako jste importovali soubor 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'));

❮ Předchozí Další ❯

React Tutorial