Sass (syntaktisk fantastiska stilmallar) är en förlängning av CSS med ytterligare funktioner som gör den mer kraftfull. Det bästa med Sass är dess kompatibilitet med CSS, vilket innebär att du kan använda den i dina webbutvecklingsprojekt med JavaScript-ramverk som React.
Men till skillnad från vanilla CSS behöver du lite inställningar för att använda Sass. Ta reda på hur detta fungerar genom att sätta upp ett enkelt React.js-projekt och integrera Sass med det.
Så här använder du Sass i ditt React.js-projekt
Liksom andra CSS-processorer stöds inte Sass av React. För att använda Sass i React måste du installera ett tredjepartsberoende via en pakethanterare som yarn eller npm.
Du kan kontrollera om npm eller garn är installerat på din lokala maskin genom att köra npm --version eller garn --version. Om du inte ser något versionsnummer i din terminal, installera npm eller garn först.
Skapa ett React.js-projekt
För att följa den här guiden kan du ställa in en enkel React.js-app med create-react-app.
Använd först en kommandorad för att navigera till mappen du vill skapa ditt React-projekt i. Spring sedan npx create-react-app . När processen är klar, gå in i appkatalogen med CD . Lägg till följande innehåll till din App.js fil som en förrätt:
importera Reagera från "reagera";
importera "./App.scss";
fungeraApp() {
lämna tillbaka (
<div className="omslag">
<h1>Använder Sass i React</h1>
<header className="wrapper__btns">
<knapp>Blå knapp</button>
<knapp>Röd knapp</button>
<knapp>Grön knapp</button>
</header>
</div> );
}
exporterastandard App;När du har satt upp ett grundläggande React-projekt är det dags att integrera Sass.
Installera Sass
Du kan installera Sass via npm eller garn. Installera den via garn genom att springa garn lägga sass eller, om du föredrar npm, spring npm installera sass. Din pakethanterare kommer att lägga till den senaste versionen av Sass till listan över beroenden i projektets package.json fil.
Byt namn på .css-filer till .scss eller .sass
I projektets mapp byter du namn på App.css och index.css till App.scss respektive index.scss.
När du har bytt namn på dessa filer måste du uppdatera importerna i dina App.js- och index.js-filer så att de matchar de nya filtilläggen enligt följande:
importera "./index.scss";
importera "./App.scss";Från och med nu bör du använda tillägget .scss för alla stilfiler du skapar.
Importera och använda variabler och mixins
En av de mest betydelsefulla fördelarna med Sass är att det hjälper dig att skriva rena, återanvändbara stilar med hjälp av variabler och mixins. Även om det kanske inte är uppenbart hur du kan göra samma sak i React, är det inte så annorlunda från att använda Sass i projekt skrivna med vanlig JavaScript och HTML.
Skapa först en ny Stilar mapp i din src mapp. Skapa två filer i mappen Styles: _variables.scss och _mixins.scss. Lägg till följande regler i _variables.scss:
$background-color: #f06292;
$text-color: #f1d3b3;
$btn-bredd: 120px;
$btn-höjd: 40px;
$block-padding: 60px;Och lägg till följande till _mixins.scss:
@blanda i vertikal-lista {
display: flex;
align-items: center;
flex-riktning: kolumn;
}Importera sedan variabler och mixins i App.scss enligt följande:
@importera "./Stilar/variabler";
@importera "./Stilar/blandningar";Använd dina variabler och mixins i filen App.scss:
@importera "./Styles/variables.scss";
@importera "./Stilar/blandningar";
.omslag {
bakgrundsfärg: $bakgrundsfärg;
färg: $text-färg;
padding: $block-padding;&__btns {
@omfatta vertikal-lista;
knapp {
width: $btn-width;
höjd: $btn-höjd;
}
}
}
Det är så du använder variabler och mixins i React. Förutom mixins och variabler kan du också använda alla andra fantastiska funktioner i Sass, som funktioner. Det finns ingen begränsning.
Använder Sass i React.js
Sass ger mer funktionalitet utöver CSS, vilket är precis vad du behöver för att skriva återanvändbar CSS-kod.
Du kan börja använda Sass i React genom att installera sass-paketet via npm eller yarn, uppdatera dina CSS-filer till .scss eller .sass och sedan uppdatera dina importer för att använda det nya filtillägget. Efter det kan du börja skriva SCSS i React.
