Sass (syntaktisk fantastiske stilark) er en utvidelse av CSS med tilleggsfunksjoner som gjør den kraftigere. Det beste med Sass er kompatibiliteten med CSS, noe som betyr at du kan bruke den i webutviklingsprosjektene dine med JavaScript-rammeverk som React.
Men i motsetning til vanilla CSS, trenger du litt oppsett for å bruke Sass. Finn ut hvordan dette fungerer ved å sette opp et enkelt React.js-prosjekt og integrere Sass med det.
Slik bruker du Sass i ditt React.js-prosjekt
Som andre CSS-prosessorer støttes ikke Sass av React. For å bruke Sass i React, må du installere en tredjepartsavhengighet via en pakkebehandling som yarn eller npm.
Du kan sjekke om npm eller garn er installert på din lokale maskin ved å kjøre npm --versjon eller garn --versjon. Hvis du ikke ser et versjonsnummer i terminalen, installer npm eller garn først.
Opprett et React.js-prosjekt
For å følge denne veiledningen kan du sette opp en enkel React.js-app ved å bruke create-react-app.
Bruk først en kommandolinje for å navigere til mappen du vil opprette React-prosjektet i. Så løp npx create-react-app . Når prosessen er ferdig, går du inn i appkatalogen med cd . Legg til følgende innhold til din App.js fil som en startpakke:
import Reagere fra "reagere";
import "./App.scss";
funksjonApp() {
komme tilbake (
<div klassenavn="innpakning">
<h1>Bruker Sass i React</h1>
<header className="wrapper__btns">
<knapp>Blå knapp</button>
<knapp>Rød knapp</button>
<knapp>Grønn knapp</button>
</header>
</div> );
}
eksportmisligholde App;Når du har satt opp et grunnleggende React-prosjekt, er det på tide å integrere Sass.
Installer Sass
Du kan installere Sass via npm eller garn. Installer den via garn ved å løpe garn legg til sass eller, hvis du foretrekker npm, løp npm installer sass. Pakkebehandleren din vil legge til den nyeste versjonen av Sass til listen over avhengigheter i prosjektets package.json fil.
Gi nytt navn til .css-filer til .scss eller .sass
Gi nytt navn til App.css og index.css i prosjektets mappe til henholdsvis App.scss og index.scss.
Etter at du har gitt nytt navn til disse filene, må du oppdatere importene i App.js- og index.js-filene dine slik at de samsvarer med de nye filtypene som følger:
import "./index.scss";
import "./App.scss";Fra dette tidspunktet bør du bruke .scss-utvidelsen for enhver stilfil du lager.
Importere og bruke variabler og mixins
En av de mest betydningsfulle fordelene med Sass er at det hjelper deg å skrive rene, gjenbrukbare stiler ved hjelp av variabler og mixins. Selv om det kanskje ikke er tydelig hvordan du kan gjøre det samme i React, er det ikke så forskjellig fra å bruke Sass i prosjekter skrevet med vanlig JavaScript og HTML.
Først oppretter du en ny Stiler mappe i din src mappe. Lag to filer i Styles-mappen: _variables.scss og _mixins.scss. Legg til følgende regler i _variables.scss:
$bakgrunnsfarge: #f06292;
$tekst-farge: #f1d3b3;
$btn-bredde: 120px;
$btn-høyde: 40px;
$block-padding: 60px;Og legg til følgende til _mixins.scss:
@mixin vertikal-liste {
display: flex;
align-items: center;
flex-retning: kolonne;
}Importer deretter variabler og mixins i App.scss som følger:
@import "./Stiler/variabler";
@import "./Stiler/blandinger";Bruk variablene og blandingene dine i App.scss-filen:
@import "./Stiler/variabler.scss";
@import "./Stiler/blandinger";
.wrapper {
bakgrunnsfarge: $bakgrunnsfarge;
farge: $tekst-farge;
padding: $block-padding;&__btns {
@inkludere vertikal-liste;
knapp {
width: $btn-width;
høyde: $btn-høyde;
}
}
}
Det er slik du bruker variabler og mixins i React. Foruten mixins og variabler, kan du også bruke alle de andre fantastiske funksjonene i Sass, som funksjoner. Det er ingen begrensning.
Bruker Sass i React.js
Sass gir mer funksjonalitet på toppen av CSS, som er akkurat det du trenger for å skrive gjenbrukbar CSS-kode.
Du kan begynne å bruke Sass i React ved å installere sass-pakken via npm eller yarn, oppdatere CSS-filene til .scss eller .sass, og deretter oppdatere importene dine for å bruke den nye filtypen. Etter det kan du begynne å skrive SCSS i React.
