Kaltaisesi lukijat auttavat tukemaan MUO: ta. Kun teet ostoksen käyttämällä sivustollamme olevia linkkejä, voimme ansaita kumppanipalkkion. Lue lisää.

Sass (syntaktisesti mahtavat tyylisivut) on CSS: n laajennus lisäominaisuuksilla, jotka tekevät siitä tehokkaamman. Parasta Sassissa on sen yhteensopivuus CSS: n kanssa, mikä tarkoittaa, että voit käyttää sitä web-kehitysprojekteissasi JavaScript-kehysten, kuten Reactin, kanssa.

Toisin kuin vanilja CSS, tarvitset kuitenkin hieman asetuksia käyttääksesi Sassia. Ota selvää, miten tämä toimii perustamalla yksinkertainen React.js-projekti ja integroimalla Sass siihen.

Sassin käyttäminen React.js-projektissasi

Kuten muut CSS-prosessorit, React ei tue Sassia alkuperäisesti. Jos haluat käyttää Sassia Reactissa, sinun on asennettava kolmannen osapuolen riippuvuus paketinhallinnan, kuten yarn tai npm, kautta.

Voit tarkistaa, onko npm tai lanka asennettu paikalliseen koneeseen suorittamalla npm -- versio tai lanka -- versio. Jos et näe versionumeroa päätteessäsi, asenna npm tai lanka ensin.

instagram viewer

Luo React.js-projekti

Noudattaaksesi tätä opasta, voit määrittää yksinkertaisen React.js-sovelluksen käyttämällä create-react-app-toimintoa.

Siirry ensin komentorivillä kansioon, johon haluat luoda React-projektin. Juokse sitten npx Create-React-app . Kun prosessi on valmis, siirry sovellushakemistoon käyttämällä CD . Lisää seuraava sisältö omaan App.js tiedosto aloitustiedostona:

tuonti Reagoi alkaen "reagoi";
tuonti "./App.scss";
toimintoSovellus() {
palata (
<div className="kääre">
<h1>Sassin käyttö Reactissa</h1>
<header className="kääre__btns">
<-painiketta>Sininen painike</button>
<-painiketta>Punainen painike</button>
<-painiketta>Vihreä painike</button>
</header>
</div> );
}
viedäoletuksena Sovellus;

Kun olet määrittänyt React-perusprojektin, on aika integroida Sass.

Asenna Sass

Voit asentaa Sassin npm: n tai langan kautta. Asenna se langan kautta ajamalla lanka lisää sass tai jos haluat npm, juokse npm install sass. Paketinhallintasi lisää Sassin uusimman version projektin riippuvuuksien luetteloon package.json tiedosto.

Nimeä .css-tiedostot uudelleen muotoon .scss tai .sass

Nimeä projektin kansiossa App.css ja index.css uudelleen muotoiksi App.scss ja index.scss.

Kun olet nimennyt nämä tiedostot uudelleen, sinun on päivitettävä App.js- ja index.js-tiedostojen tuonnit vastaamaan uusia tiedostopäätteitä seuraavasti:

tuonti "./index.scss";
tuonti "./App.scss";

Tästä eteenpäin sinun tulee käyttää .scss-tunnistetta kaikissa luomissasi tyylitiedostoissa.

Muuttujien ja sekoitusten tuonti ja käyttö

Yksi merkittävimmistä Sassin edut se auttaa sinua kirjoittamaan puhtaita, uudelleenkäytettäviä tyylejä käyttämällä muuttujia ja sekoituksia. Vaikka ei ehkä ole ilmeistä, kuinka voit tehdä saman Reactissa, se ei ole niin erilainen kuin Sassin käyttäminen projekteissa, jotka on kirjoitettu tavallisella JavaScriptillä ja HTML: llä.

Luo ensin uusi Tyylit kansio omassasi src kansio. Luo Tyylit-kansioon kaksi tiedostoa: _variables.scss ja _mixins.scss. Lisää seuraavat säännöt tiedostoon _variables.scss:

$taustaväri: #f06292;
$tekstin väri: #f1d3b3;
$btn-leveys: 120px;
$btn-korkeus: 40px;
$block-täyte: 60px;

Ja lisää seuraava tiedostoon _mixins.scss:

@Sekoita joukkoon vertikaalinen lista {
näyttö: flex;
kohdista kohteet: keskellä;
flex-suunta: pylväs;
}

Tuo sitten muuttujat ja mixinit App.scss-tiedostoon seuraavasti:

@tuonti "./Tyylit/muuttujat";
@tuonti "./Tyylit/sekoitukset";

Käytä muuttujiasi ja mixinejäsi App.scss-tiedostossa:

@tuonti "./Styles/variables.scss";
@tuonti "./Tyylit/sekoitukset";
.kääre {
taustaväri: $taustaväri;
väri: $teksti-väri;
pehmuste: $block-padding;

&__btns {
@sisältää pystysuora-lista;
painike {
leveys: $btn-width;
korkeus: $btn-korkeus;
}
}
}

Näin käytät muuttujia ja mixinejä Reactissa. Mixinien ja muuttujien lisäksi voit käyttää myös kaikkia muita Sassin mahtavia ominaisuuksia, kuten toimintoja. Ei ole rajoitusta.

Sassin käyttäminen React.js: ssä

Sass tarjoaa enemmän toimintoja CSS: n lisäksi, mikä on juuri sitä, mitä tarvitset uudelleen käytettävän CSS-koodin kirjoittamiseen.

Voit aloittaa Sassin käytön Reactissa asentamalla sass-paketin npm: n tai yarnin kautta, päivittämällä CSS-tiedostosi muotoon .scss tai .sass ja päivittämällä sitten tuontisi käyttämään uutta tiedostopäätettä. Sen jälkeen voit aloittaa SCSS: n kirjoittamisen Reactissa.