Sass (süntaktiliselt vinged stiililehed) on CSS-i laiendus koos lisafunktsioonidega, mis muudavad selle võimsamaks. Parim asi Sassi juures on selle ühilduvus CSS-iga, mis tähendab, et saate seda kasutada oma veebiarendusprojektides JavaScripti raamistikega nagu React.
Kuid erinevalt vanilje CSS-ist vajate Sassi kasutamiseks veidi häälestust. Siit saate teada, kuidas see toimib, seadistades lihtsa React.js projekti ja integreerides Sassi sellega.
Kuidas kasutada Sassi oma React.js projektis
Sarnaselt teistele CSS-protsessoritele ei toeta React Sassi algselt. Sassi kasutamiseks Reactis peate installima kolmanda osapoole sõltuvuse paketihalduri (nt yarn või npm) kaudu.
Saate kontrollida, kas npm või yarn on teie kohalikku masinasse installitud, käivitades npm -- versioon või lõng -- versioon. Kui te oma terminalis versiooninumbrit ei näe, installi npm või kõigepealt lõng.
Looge React.js projekt
Selle juhendi järgimiseks saate seadistada lihtsa rakenduse React.js, kasutades selleks loo-react-app.
Esmalt kasutage käsurida, et navigeerida kausta, kuhu soovite oma Reacti projekti luua. Siis jookse npx loo-reageeri-rakendus . Kui protsess on lõppenud, sisestage rakenduse kataloog kasutades cd . Lisage omale järgmine sisu App.js faili käivitajana:
importida Reageerige alates "reageerida";
importida "./App.scss";
funktsiooniRakendus() {
tagasi (
<div klassiNimi="ümbris">
<h1>Sassi kasutamine Reactis</h1>
<päis className="ümbris__btns">
<nuppu>Sinine nupp</button>
<nuppu>Punane nupp</button>
<nuppu>Roheline nupp</button>
</header>
</div> );
}
eksportidavaikimisi Rakendus;Kui olete Reacti põhiprojekti seadistanud, on aeg Sass integreerida.
Installige Sass
Sassi saate installida npm-i või lõnga kaudu. Paigaldage see läbi lõnga, käivitades lõng lisa sass või kui eelistad npm, jookse npm install sass. Teie paketihaldur lisab Sassi uusima versiooni projekti sõltuvuste loendisse package.json faili.
Nimeta .css-failid ümber failiks .scss või .sass
Nimetage projekti kaustas App.css ja index.css ümber vastavalt nimedeks App.scss ja index.scss.
Pärast nende failide ümbernimetamist peate värskendama oma App.js- ja index.js-failide importi, et need vastaksid uutele faililaienditele järgmiselt.
importida "./index.scss";
importida "./App.scss";Sellest hetkest alates peaksite iga loodud stiilifaili jaoks kasutama laiendit .scss.
Muutujate ja segude importimine ja kasutamine
Üks olulisemaid Sassi eelised on see, et see aitab muutujate ja segude abil kirjutada puhtaid korduvkasutatavaid stiile. Ehkki ei pruugi olla ilmne, kuidas saate Reactis sama teha, ei erine see nii palju Sassi kasutamisest lihtsa JavaScripti ja HTML-iga kirjutatud projektides.
Esiteks looge uus Stiilid teie kaustas src kausta. Looge kaustas Styles kaks faili: _muutujad.scss ja _mixins.scss. Lisage failile _variables.scss järgmised reeglid:
$taustavärv: #f06292;
$teksti värv: #f1d3b3;
$btn-laius: 120px;
$btn-kõrgus: 40px;
$block-padding: 60px;Ja lisage failile _mixins.scss järgmine:
@mixin vertical-list {
ekraan: flex;
joonda-elemendid: keskel;
paindesuund: veerg;
}Seejärel importige muutujad ja miksinid faili App.scss järgmiselt.
@import "./Stiilid/muutujad";
@import "./Stiilid/miksiinid";Kasutage oma muutujaid ja segusid failis App.scss:
@import "./Styles/variables.scss";
@import "./Stiilid/miksiinid";
.ümbris {
taustavärv: $taustavärv;
värv: $tekst-värv;
polsterdus: $block-padding;&__btns {
@sisaldama vertikaalne-nimekirja;
nupp {
laius: $btn-width;
kõrgus: $btn-height;
}
}
}
Nii kasutate Reactis muutujaid ja segusid. Lisaks miksinidele ja muutujatele saate kasutada ka kõiki teisi Sassi suurepäraseid funktsioone, näiteks funktsioone. Pole piirangut.
Sassi kasutamine rakenduses React.js
Sass pakub lisaks CSS-ile rohkem funktsioone, mis on täpselt see, mida vajate korduvkasutatava CSS-koodi kirjutamiseks.
Saate alustada Sassi kasutamist rakenduses React, installides sassi paketi npm-i või lõnga kaudu, värskendades oma CSS-faile .scss- või .sass-vormingus ja seejärel värskendades imporditud andmeid uue faililaiendi kasutamiseks. Pärast seda võite hakata Reactis SCSS-i kirjutama.
