Stylizacja Reaguj za pomocą Sass
Co to jest Sass
Sass to preprocesor CSS.
Pliki Sass są uruchamiane na serwerze i wysyłają CSS do przeglądarki.
Możesz dowiedzieć się więcej o Sass w naszym samouczku Sass .
Czy mogę używać Sassa?
Jeśli używasz the create-react-appw swoim projekcie, możesz łatwo zainstalować i używać Sassa w swoich projektach React.
Zainstaluj Sass, uruchamiając to polecenie w swoim terminalu:
>npm i sass
Teraz jesteś gotowy do włączenia plików Sass do swojego projektu!
Utwórz plik Sass
Utwórz plik Sass w taki sam sposób, jak tworzysz pliki CSS, ale pliki Sass mają rozszerzenie pliku.scss
W plikach Sass możesz używać zmiennych i innych funkcji Sassa:
my-sass.scss:
Utwórz zmienną, aby zdefiniować kolor tekstu:
$myColor: red;
h1 {
color: $myColor;
}Zaimportuj plik Sass w taki sam sposób, w jaki importowałeś plik 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'));