Sass (sintaktiski lieliskas stila lapas) ir CSS paplašinājums ar papildu funkcijām, kas padara to jaudīgāku. Sass labākā lieta ir tā saderība ar CSS, kas nozīmē, ka varat to izmantot savos tīmekļa izstrādes projektos ar JavaScript ietvariem, piemēram, React.
Tomēr atšķirībā no vaniļas CSS, lai izmantotu Sass, ir nepieciešama neliela iestatīšana. Uzziniet, kā tas darbojas, iestatot vienkāršu React.js projektu un integrējot Sass ar to.
Kā izmantot Sass savā React.js projektā
Tāpat kā citi CSS procesori, React sākotnēji neatbalsta Sass. Lai lietotu Sass programmā React, jums ir jāinstalē trešās puses atkarība, izmantojot pakotņu pārvaldnieku, piemēram, yarn vai npm.
Palaižot, varat pārbaudīt, vai npm vai dzija ir instalēta jūsu vietējā datorā npm — versija vai dzija -- versija. Ja terminālī neredzat versijas numuru, instalēt npm vai vispirms dzija.
Izveidojiet React.js projektu
Lai ievērotu šo rokasgrāmatu, varat iestatīt vienkāršu React.js lietotni, izmantojot lietotni Create-react-app.
Vispirms izmantojiet komandrindu, lai pārietu uz mapi, kurā vēlaties izveidot savu React projektu. Tad skrien npx izveidot-reaģēt-lietotni . Kad process ir pabeigts, ievadiet lietotņu direktoriju, izmantojot cd . Pievienojiet tālāk norādīto saturu savam App.js failu kā iesācēju:
imports Reaģēt no "reaģēt";
imports "./App.scss";
funkcijuApp() {
atgriezties (
<div klasesNosaukums="iesaiņojums">
<h1>Sass izmantošana programmā React</h1>
<galvene className="iesaiņojums__btns">
<pogu>Zilā poga</button>
<pogu>Sarkanā poga</button>
<pogu>Zaļā poga</button>
</header>
</div> );
}
eksportētnoklusējuma Lietotne;Kad esat iestatījis pamata React projektu, ir pienācis laiks integrēt Sass.
Instalējiet Sass
Jūs varat instalēt Sass, izmantojot npm vai dziju. Instalējiet to caur dziju, palaižot dzija pievienot sass vai, ja vēlaties npm, skrieniet npm instalēt sass. Jūsu pakotņu pārvaldnieks pievienos jaunāko Sass versiju projekta atkarību sarakstam pack.json failu.
Pārdēvējiet .css failus uz .scss vai .sass
Projekta mapē pārdēvējiet App.css un index.css attiecīgi par App.scss un index.scss.
Kad esat pārdēvējis šos failus, jums ir jāatjaunina importēšana savos App.js un index.js failos, lai tie atbilstu jaunajiem failu paplašinājumiem, kā norādīts tālāk.
imports "./index.scss";
imports "./App.scss";No šī brīža jebkuram izveidotajam stila failam ir jāizmanto paplašinājums .scss.
Mainīgo un kombināciju importēšana un izmantošana
Viens no nozīmīgākajiem Sass priekšrocības ir tas, ka tas palīdz rakstīt tīrus, atkārtoti lietojamus stilus, izmantojot mainīgos un miksus. Lai gan var nebūt skaidrs, kā jūs varat darīt to pašu programmā React, tas tik ļoti neatšķiras no Sass izmantošanas projektos, kas rakstīti ar vienkāršu JavaScript un HTML.
Pirmkārt, izveidojiet jaunu Stili mapē jūsu src mapi. Mapē Stili izveidojiet divus failus: _variables.scss un _mixins.scss. Pievienojiet failam _variables.scss šādus noteikumus:
$fona krāsa: #f06292;
$text-color: #f1d3b3;
$btn platums: 120px;
$btn-augstums: 40px;
$block-padding: 60px;Un failam _mixins.scss pievienojiet šo:
@mixin vertical-list {
displejs: flex;
izlīdzināt vienumus: centrs;
flex-direction: kolonna;
}Pēc tam importējiet mainīgos un mixins failā App.scss šādi:
@importēt "./Stili/mainīgie";
@importēt "./Stili/miksīni";Izmantojiet savus mainīgos un miksus failā App.scss:
@importēt "./Stili/mainīgie.scss";
@importēt "./Stili/miksīni";
.iesaiņojums {
fona krāsa: $fona krāsa;
krāsa: $text-color;
polsterējums: $bloks-padding;&__btns {
@ietver vertikāli-sarakstu;
poga {
platums: $btn-width;
augstums: $btn-height;
}
}
}
Tādā veidā jūs izmantojat mainīgos un mixins programmā React. Papildus mixiniem un mainīgajiem varat izmantot arī visas pārējās satriecošās Sass funkcijas, piemēram, funkcijas. Nav ierobežojumu.
Sass izmantošana programmā React.js
Sass nodrošina papildu funkcionalitāti papildus CSS, kas ir tieši tas, kas jums nepieciešams, lai rakstītu atkārtoti lietojamu CSS kodu.
Varat sākt lietot Sass programmā React, instalējot sass pakotni, izmantojot npm vai yarn, atjauninot CSS failus uz .scss vai .sass, pēc tam atjauninot importētos failus, lai izmantotu jauno faila paplašinājumu. Pēc tam jūs varat sākt rakstīt SCSS programmā React.
