Sass (sintaktički izvrsni stilski listovi) proširenje je CSS-a s dodatnim značajkama koje ga čine moćnijim. Najbolja stvar kod Sass-a je njegova kompatibilnost sa CSS-om, što znači da ga možete koristiti u svojim projektima web razvoja s JavaScript okvirima kao što je React.
Međutim, za razliku od vanilla CSS-a, potrebno vam je malo podešavanja da biste koristili Sass. Saznajte kako to funkcionira tako što ćete postaviti jednostavan React.js projekt i integrirati Sass s njim.
Kako koristiti Sass u vašem React.js projektu
Kao i drugi CSS procesori, React izvorno ne podržava Sass. Da biste koristili Sass u Reactu, morate instalirati ovisnost treće strane putem upravitelja paketa kao što je yarn ili npm.
Možete provjeriti je li npm ili yarn instaliran na vašem lokalnom računalu pokretanjem npm --verzija ili pređa --verzija. Ako ne vidite broj verzije na svom terminalu, instalirajte npm ili prvo pređe.
Napravite projekt React.js
Da biste slijedili ovaj vodič, možete postaviti jednostavnu React.js aplikaciju koristeći create-react-app.
Prvo koristite naredbeni redak za navigaciju do mape u kojoj želite stvoriti svoj React projekt. Onda trči npx create-react-app . Kada proces završi, unesite direktorij aplikacije koristeći CD . Dodajte sljedeći sadržaj svom App.js datoteka kao početak:
uvoz Reagirati iz "reagirati";
uvoz "./App.scss";
funkcijaaplikacija() {
povratak (
<div className="omot">
<h1>Korištenje Sass-a u Reactu</h1>
<zaglavlje className="omot__btns">
<dugme>Plavi gumb</button>
<dugme>Crveno dugme</button>
<dugme>Zeleni gumb</button>
</header>
</div> );
}
izvozzadano aplikacija;Nakon što ste postavili osnovni React projekt, vrijeme je da integrirate Sass.
Instalirajte Sass
Sass možete instalirati putem npm-a ili yarn-a. Instalirajte ga preko pređe trčanjem pređa dodati sas ili, ako više volite npm, pokrenite npm instalirati sass. Vaš upravitelj paketa će dodati najnoviju verziju Sassa na popis ovisnosti u projektu paket.json datoteka.
Preimenujte .css datoteke u .scss ili .sass
U mapi projekta preimenujte App.css i index.css u App.scss odnosno index.scss.
Nakon što ste preimenovali te datoteke, trebate ažurirati uvoze u datotekama App.js i index.js kako bi odgovarale novim ekstenzijama datoteka kako slijedi:
uvoz "./index.scss";
uvoz "./App.scss";Od ove točke nadalje, trebali biste koristiti ekstenziju .scss za svaku stilsku datoteku koju izradite.
Uvoz i korištenje varijabli i mikseva
Jedan od najznačajnijih prednosti Sass-a je to što vam pomaže da pišete čiste stilove koji se mogu ponovno koristiti koristeći varijable i mixins. Iako možda nije jasno kako možete učiniti isto u Reactu, to se ne razlikuje toliko od korištenja Sass-a u projektima napisanim s običnim JavaScriptom i HTML-om.
Prvo stvorite novi Stilovi mapu u vašem src mapa. U mapi Stilovi izradite dvije datoteke: _varijable.scss i _mixins.scss. Dodajte sljedeća pravila u _variables.scss:
$background-color: #f06292;
$text-color: #f1d3b3;
$btn-width: 120px;
$btn-visina: 40px;
$block-padding: 60px;I dodajte sljedeće u _mixins.scss:
@mixin okomiti popis {
zaslon: savitljiv;
align-items: center;
smjer savijanja: stupac;
}Zatim uvezite varijable i miksine u App.scss na sljedeći način:
@uvoz "./Stilovi/varijable";
@uvoz "./Stilovi/miksovi";Upotrijebite svoje varijable i mixins u datoteci App.scss:
@uvoz "./Stilovi/varijable.scss";
@uvoz "./Stilovi/miksovi";
.omot {
boja-pozadine: $boja-pozadine;
boja: $boja-teksta;
padding: $block-padding;&__btns {
@uključiti vertikalno-popis;
dugme {
širina: $btn-širina;
visina: $btn-visina;
}
}
}
Tako koristite varijable i miksine u Reactu. Osim mixina i varijabli, također možete koristiti sve druge izvrsne značajke u Sassu, poput funkcija. Nema ograničenja.
Korištenje Sass-a u React.js
Sass pruža više funkcionalnosti povrh CSS-a, što je upravo ono što će vam trebati za pisanje višekratnog CSS koda.
Možete početi koristiti Sass u Reactu tako što ćete instalirati sass paket putem npm-a ili yarn-a, ažurirati svoje CSS datoteke na .scss ili .sass, zatim ažurirati svoje uvoze da koriste novu ekstenziju datoteke. Nakon toga možete početi pisati SCSS u Reactu.