Sass (sintaktično odlični slogovni listi) je razširitev CSS z dodatnimi funkcijami, zaradi katerih je močnejši. Najboljša stvar pri Sassu je njegova združljivost s CSS, kar pomeni, da ga lahko uporabljate v svojih projektih spletnega razvoja z okviri JavaScript, kot je React.
Vendar pa za razliko od vanilije CSS potrebujete nekaj nastavitev za uporabo Sass. Ugotovite, kako to deluje, tako da nastavite preprost projekt React.js in z njim integrirate Sass.
Kako uporabiti Sass v svojem projektu React.js
Tako kot drugi procesorji CSS React ne podpira izvorno Sass. Če želite uporabljati Sass v Reactu, morate namestiti odvisnost tretje osebe prek upravitelja paketov, kot je yarn ali npm.
Z zagonom lahko preverite, ali je npm ali yarn nameščen na vašem lokalnem računalniku npm --različica oz preja --različica. Če v terminalu ne vidite številke različice, namestite npm ali najprej preje.
Ustvarite projekt React.js
Če želite slediti temu vodniku, lahko nastavite preprosto aplikacijo React.js z uporabo create-react-app.
Najprej se z ukazno vrstico pomaknite do mape, v kateri želite ustvariti svoj projekt React. Potem teci npx create-react-app . Ko je postopek končan, vnesite imenik aplikacij z uporabo cd . Svojemu dodajte naslednjo vsebino App.js datoteka kot začetnik:
uvoz Reagiraj od "reagirati";
uvoz "./App.scss";
funkcijoaplikacija() {
vrnitev (
<div className="ovoj">
<h1>Uporaba Sass v Reactu</h1>
<glava className="ovoj__btns">
<gumb>Modri gumb</button>
<gumb>Rdeči gumb</button>
<gumb>Zeleni gumb</button>
</header>
</div> );
}
izvozprivzeto aplikacija;Ko nastavite osnovni projekt React, je čas, da integrirate Sass.
Namestite Sass
Sass lahko namestite prek npm ali yarn. Namestite ga preko preje s tekom preje dodajte sass ali, če vam je ljubše npm, zaženite npm namestite sass. Vaš upravitelj paketov bo dodal najnovejšo različico Sass na seznam odvisnosti v projektu package.json mapa.
Preimenujte datoteke .css v .scss ali .sass
V mapi projekta preimenujte App.css in index.css v App.scss oziroma index.scss.
Ko preimenujete te datoteke, morate posodobiti uvoze v datotekah App.js in index.js, da se ujemajo z novimi končnicami datotek, kot sledi:
uvoz "./index.scss";
uvoz "./App.scss";Od tega trenutka naprej bi morali uporabljati pripono .scss za katero koli slogovno datoteko, ki jo ustvarite.
Uvažanje in uporaba spremenljivk in mešanic
Eden najpomembnejših prednosti Sass je, da vam pomaga napisati čiste sloge, ki jih je mogoče ponovno uporabiti, z uporabo spremenljivk in mešanic. Čeprav morda ni jasno, kako lahko storite enako v Reactu, se to ne razlikuje toliko od uporabe Sass v projektih, napisanih z navadnim JavaScriptom in HTML.
Najprej ustvarite novo Slogi mapo v vašem src mapo. V mapi Slogi ustvarite dve datoteki: _spremenljivke.scss in _mixins.scss. V _variables.scss dodajte naslednja pravila:
$barva-ozadje: #f06292;
$text-color: #f1d3b3;
$btn-width: 120px;
$btn-height: 40px;
$block-padding: 60px;In v _mixins.scss dodajte naslednje:
@mixin vertikalni seznam {
zaslon: flex;
align-items: center;
flex-direction: stolpec;
}Nato uvozite spremenljivke in mixine v App.scss na naslednji način:
@uvoz "./Slogi/spremenljivke";
@uvoz "./Slogi/mešanice";Uporabite svoje spremenljivke in mešanice v datoteki App.scss:
@uvoz "./Slogi/spremenljivke.scss";
@uvoz "./Slogi/mešanice";
.ovitek {
barva-ozadje: $barva-ozadje;
barva: $text-color;
oblazinjenje: $block-padding;&__btns {
@vključujejo navpično-seznam;
gumb {
širina: $btn-širina;
višina: $btn-height;
}
}
}
Tako uporabljate spremenljivke in miksine v Reactu. Poleg miksinov in spremenljivk lahko uporabite tudi vse druge izjemne funkcije v Sassu, kot so funkcije. Ni omejitev.
Uporaba Sass v React.js
Sass ponuja več funkcionalnosti poleg CSS, kar je točno tisto, kar boste potrebovali za pisanje kode CSS za večkratno uporabo.
Sass lahko začnete uporabljati v Reactu tako, da namestite paket sass prek npm ali yarn, posodobite svoje datoteke CSS na .scss ali .sass in nato posodobite svoje uvoze za uporabo nove datotečne pripone. Po tem lahko začnete pisati SCSS v React.