Sass (foile de stil extraordinare din punct de vedere sintactic) este o extensie a CSS cu funcții suplimentare care o fac mai puternică. Cel mai bun lucru despre Sass este compatibilitatea cu CSS, ceea ce înseamnă că îl puteți utiliza în proiectele dvs. de dezvoltare web cu cadre JavaScript precum React.
Cu toate acestea, spre deosebire de vanilla CSS, aveți nevoie de puțină configurare pentru a utiliza Sass. Aflați cum funcționează acest lucru creând un proiect React.js simplu și integrând Sass cu acesta.
Cum să utilizați Sass în proiectul dvs. React.js
Ca și alte procesoare CSS, Sass nu este suportat nativ de React. Pentru a utiliza Sass în React, trebuie să instalați o dependență terță parte printr-un manager de pachete, cum ar fi yarn sau npm.
Puteți verifica dacă npm sau yarn este instalat pe mașina dvs. locală rulând
npm --versiune sau yarn --versiune. Dacă nu vedeți un număr de versiune în terminalul dvs., instalați npm sau mai întâi fire.Creați un proiect React.js
Pentru a urma acest ghid, puteți configura o aplicație React.js simplă folosind create-react-app.
Mai întâi, utilizați o linie de comandă pentru a naviga la folderul în care doriți să vă creați proiectul React. Apoi fugi npx create-react-app . Odată ce procesul se termină, introduceți directorul aplicației folosind CD . Adăugați următorul conținut la dvs App.js fișier ca starter:
import Reacţiona din "reacţiona";
import "./App.scss";
funcţieApp() {
întoarcere (
<div className="învelitoare">
<h1>Folosind Sass în React</h1>
<antet className="wrapper__btns">
<buton>Buton Albastru</button>
<buton>Buton Roșu</button>
<buton>Buton verde</button>
</header>
</div> );
}
exportMod implicit Aplicație;După ce ați configurat un proiect React de bază, este timpul să integrați Sass.
Instalați Sass
Puteți instala Sass prin npm sau cu fire. Instalați-l prin fire prin rulare fire adăuga sass sau, dacă preferați npm, rulați npm instalează sass. Managerul dumneavoastră de pachete va adăuga cea mai recentă versiune de Sass la lista de dependențe din proiect pachet.json fişier.
Redenumiți fișierele .css în .scss sau .sass
În folderul proiectului, redenumiți App.css și index.css în App.scss și, respectiv, index.scss.
După ce ați redenumit fișierele respective, trebuie să actualizați importurile din fișierele App.js și index.js pentru a se potrivi cu noile extensii de fișiere, după cum urmează:
import "./index.scss";
import "./App.scss";Din acest moment, ar trebui să utilizați extensia .scss pentru orice fișier de stil pe care îl creați.
Importarea și utilizarea variabilelor și mixurilor
Una dintre cele mai semnificative avantajele lui Sass este că vă ajută să scrieți stiluri curate, reutilizabile folosind variabile și mixuri. Deși poate să nu fie evident cum puteți face același lucru în React, nu este atât de diferit de utilizarea Sass în proiecte scrise cu JavaScript și HTML simplu.
Mai întâi, creați un nou Stiluri dosarul din dvs src pliant. În folderul Stiluri, creați două fișiere: _variabile.scss și _mixins.scss. Adăugați următoarele reguli la _variables.scss:
$culoare-fond: #f06292;
$text-color: #f1d3b3;
$btn-width: 120px;
$btn-înălțime: 40px;
$block-padding: 60px;Și adăugați următoarele la _mixins.scss:
@mixin lista-verticala {
display: flex;
alinierea elementelor: centru;
flex-direcție: coloană;
}Apoi importați variabile și mixuri în App.scss, după cum urmează:
@import "./Stiluri/variabile";
@import "./Stiluri/mixine";Utilizați variabilele și mixurile dvs. în fișierul App.scss:
@import "./Stiluri/variabile.scss";
@import "./Stiluri/mixine";
.înveliş {
culoare-fond: $culoare-fond;
culoare: $text-culoare;
padding: $block-padding;&__btns {
@include vertical-listă;
butonul {
lățime: $btn-width;
înălțime: $btn-înălțime;
}
}
}
Așa folosiți variabilele și mixurile în React. Pe lângă mixuri și variabile, puteți folosi și toate celelalte caracteristici minunate din Sass, cum ar fi funcțiile. Nu există nicio limitare.
Folosind Sass în React.js
Sass oferă mai multe funcționalități pe lângă CSS, care este exact ceea ce veți avea nevoie pentru a scrie cod CSS reutilizabil.
Puteți începe să utilizați Sass în React instalând pachetul sass prin npm sau yarn, actualizați fișierele CSS la .scss sau .sass, apoi actualizați importurile pentru a utiliza noua extensie de fișier. După aceea, puteți începe să scrieți SCSS în React.
