Sass (syntaktisk fantastiske style sheets) er en udvidelse af CSS med yderligere funktioner, der gør den mere kraftfuld. Det bedste ved Sass er dets kompatibilitet med CSS, hvilket betyder, at du kan bruge det i dine webudviklingsprojekter med JavaScript-frameworks som React.
I modsætning til vanilla CSS har du dog brug for en lille smule opsætning for at bruge Sass. Find ud af, hvordan dette fungerer ved at konfigurere et simpelt React.js-projekt og integrere Sass med det.
Sådan bruger du Sass i dit React.js-projekt
Som andre CSS-processorer er Sass ikke naturligt understøttet af React. For at bruge Sass i React skal du installere en tredjepartsafhængighed via en pakkemanager som yarn eller npm.
Du kan kontrollere, om npm eller garn er installeret på din lokale maskine ved at køre npm --version eller garn --version. Hvis du ikke kan se et versionsnummer i din terminal, installer npm eller garn først.
Opret et React.js-projekt
For at følge denne guide kan du konfigurere en simpel React.js-app ved hjælp af create-react-app.
Brug først en kommandolinje til at navigere til den mappe, du vil oprette dit React-projekt i. Så løb npx create-react-app . Når processen er færdig, skal du gå ind i app-biblioteket ved hjælp af cd . Tilføj følgende indhold til din App.js fil som en starter:
importere Reagere fra "reagere";
importere "./App.scss";
fungereApp() {
Vend tilbage (
<div klassenavn="indpakning">
<h1>Brug af Sass i React</h1>
<header klassenavn="wrapper__btns">
<knap>Blå knap</button>
<knap>Rød knap</button>
<knap>Grøn knap</button>
</header>
</div> );
}
eksportStandard App;Når du har oprettet et grundlæggende React-projekt, er det tid til at integrere Sass.
Installer Sass
Du kan installere Sass via npm eller garn. Installer det via garn ved at løbe garn tilføje sass eller, hvis du foretrækker npm, løb npm installer sass. Din pakkeadministrator vil tilføje den seneste version af Sass til listen over afhængigheder i projektets package.json fil.
Omdøb .css-filer til .scss eller .sass
I projektets mappe skal du omdøbe App.css og index.css til henholdsvis App.scss og index.scss.
Når du har omdøbt disse filer, skal du opdatere importen i dine App.js- og index.js-filer, så de matcher de nye filtypenavne som følger:
importere "./index.scss";
importere "./App.scss";Fra dette tidspunkt skal du bruge filtypenavnet .scss til enhver stilfil, du opretter.
Import og brug af variabler og mixins
En af de mest betydningsfulde fordelene ved Sass er, at det hjælper dig med at skrive rene, genbrugelige stilarter ved hjælp af variabler og mixins. Selvom det måske ikke er tydeligt, hvordan du kan gøre det samme i React, er det ikke så forskelligt fra at bruge Sass i projekter skrevet med almindelig JavaScript og HTML.
Først skal du oprette en ny Stilarter mappe i din src folder. I mappen Styles skal du oprette to filer: _variables.scss og _mixins.scss. Tilføj følgende regler til _variables.scss:
$baggrundsfarve: #f06292;
$tekst-farve: #f1d3b3;
$btn-bredde: 120px;
$btn-højde: 40px;
$blok-polstring: 60px;Og tilføj følgende til _mixins.scss:
@mixin vertikal-liste {
display: flex;
align-items: center;
flex-retning: kolonne;
}Importer derefter variabler og mixins i App.scss som følger:
@importere "./Stilarter/variabler";
@importere "./Stilarter/blandinger";Brug dine variabler og mixins i App.scss-filen:
@importere "./Stilarter/variabler.scss";
@importere "./Stilarter/blandinger";
.indpakning {
baggrundsfarve: $baggrundsfarve;
farve: $tekst-farve;
polstring: $blok-polstring;&__btns {
@omfatte lodret-liste;
knap {
width: $btn-width;
højde: $btn-højde;
}
}
}
Sådan bruger du variabler og mixins i React. Udover mixins og variabler kan du også bruge alle de andre fantastiske funktioner i Sass, såsom funktioner. Der er ingen begrænsning.
Brug af Sass i React.js
Sass giver mere funktionalitet oven i CSS, hvilket er præcis, hvad du skal bruge for at skrive genbrugelig CSS-kode.
Du kan begynde at bruge Sass i React ved at installere sass-pakken via npm eller yarn, opdatere dine CSS-filer til .scss eller .sass og derefter opdatere dine importer til at bruge den nye filtypenavn. Derefter kan du begynde at skrive SCSS i React.
