Sass (sintaksiškai nuostabūs stiliaus lapai) yra CSS plėtinys su papildomomis funkcijomis, kurios daro jį galingesnį. Geriausias „Sass“ dalykas yra jo suderinamumas su CSS, o tai reiškia, kad galite jį naudoti savo žiniatinklio kūrimo projektuose su „JavaScript“ sistemomis, tokiomis kaip „React“.
Tačiau, skirtingai nei vanilinis CSS, norint naudoti „Sass“, reikia šiek tiek sąrankos. Sužinokite, kaip tai veikia, nustatydami paprastą React.js projektą ir integruodami su juo Sass.
Kaip naudoti Sass savo React.js projekte
Kaip ir kiti CSS procesoriai, „Sass“ iš esmės nepalaiko „React“. Norėdami naudoti „Sass“ sistemoje „React“, turite įdiegti trečiosios šalies priklausomybę naudodami paketų tvarkyklę, pvz., „Yarn“ arba „npm“.
Paleidę galite patikrinti, ar npm arba yarn įdiegtas jūsų vietiniame kompiuteryje npm -- versija arba verpalai - versija. Jei terminale nematote versijos numerio, įdiegti npm arba pirmiausia verpalai.
Sukurkite React.js projektą
Norėdami vadovautis šiuo vadovu, galite nustatyti paprastą React.js programą naudodami „create-react-app“.
Pirmiausia naudokite komandinę eilutę, kad pereitumėte į aplanką, kuriame norite sukurti savo „React“ projektą. Tada bėk npx sukurti-reaguoti-programą . Kai procesas bus baigtas, įveskite programos katalogą naudodami cd . Pridėkite toliau nurodytą turinį prie savo App.js failas kaip starteris:
importuoti Reaguoti iš „reaguoti“;
importuoti "./App.scss";
funkcijaProgramėlė() {
grąžinti (
<div className="vyniojamasis popierius">
<h1>„Sass“ naudojimas „React“.</h1>
<antraštė className="vyniotuvas__btns">
<mygtuką>Mėlynas mygtukas</button>
<mygtuką>Raudonas mygtukas</button>
<mygtuką>Žalias mygtukas</button>
</header>
</div> );
}
eksportuotinumatytas Programėlė;Kai nustatysite pagrindinį „React“ projektą, laikas integruoti „Sass“.
Įdiekite „Sass“.
„Sass“ galite įdiegti naudodami npm arba verpalus. Įdiekite jį per verpalą paleisdami verpalai pridėti sass arba, jei norite npm, bėkite npm įdiegti sass. Jūsų paketų tvarkyklė įtrauks naujausią Sass versiją į projekto priklausomybių sąrašą package.json failą.
Pervardykite .css failus į .scss arba .sass
Projekto aplanke pervardykite App.css ir index.css atitinkamai į App.scss ir index.scss.
Pervadinę tuos failus, turite atnaujinti App.js ir index.js failų importus, kad atitiktų naujus failų plėtinius, kaip nurodyta toliau:
importuoti "./index.scss";
importuoti "./App.scss";Nuo šiol bet kuriam kuriamam stiliaus failui turėtumėte naudoti .scss plėtinį.
Kintamųjų ir mišinių importavimas ir naudojimas
Vienas reikšmingiausių Sass pranašumai Tai padeda rašyti švarius, pakartotinai naudojamus stilius naudojant kintamuosius ir derinius. Nors gali būti neaišku, kaip tą patį galite padaryti naudodami „React“, tai ne taip skiriasi nuo „Sass“ naudojimo projektuose, parašytuose naudojant paprastą „JavaScript“ ir HTML.
Pirmiausia sukurkite naują Stiliai aplanką savo src aplanką. Aplanke Stiliai sukurkite du failus: _kintamieji.scss ir _mixins.scss. Pridėkite šias taisykles prie _variables.scss:
$fono spalva: #f06292;
$teksto spalva: #f1d3b3;
$btn plotis: 120px;
$btn aukštis: 40px;
$block-padding: 60px;Ir prie _mixins.scss pridėkite:
@mixin vertical-list {
ekranas: lankstus;
lygiuoti elementus: centre;
lankstumo kryptis: stulpelis;
}Tada importuokite kintamuosius ir mišinius į App.scss taip:
@importuoti "./Stiliai/kintamieji";
@importuoti "./Stiliai/mišiniai";Naudokite savo kintamuosius ir mišinius App.scss faile:
@importuoti "./Styles/variables.scss";
@importuoti "./Stiliai/mišiniai";
.vyniojamasis popierius {
fono spalva: $fono spalva;
spalva: $teksto spalva;
padding: $block-padding;&__btns {
@įtraukti vertikaliai -sąrašą;
mygtukas {
plotis: $btn-width;
aukštis: $btn-aukštis;
}
}
}
Taip „React“ naudojate kintamuosius ir mišinius. Be mišinių ir kintamųjų, taip pat galite naudoti visas kitas nuostabias Sass funkcijas, pvz., funkcijas. Nėra jokių apribojimų.
Sass naudojimas React.js
„Sass“ suteikia daugiau funkcijų be CSS, o tai yra būtent tai, ko jums reikia norint parašyti daugkartinį CSS kodą.
Galite pradėti naudoti „Sass“ programoje „React“ įdiegę „sass“ paketą per npm arba „yarn“, atnaujindami CSS failus į .scss arba .sass, tada atnaujindami importuotus failus, kad būtų naudojamas naujas failo plėtinys. Po to galite pradėti rašyti SCSS programoje „React“.
