Sass (syntakticky úžasné štýly) je rozšírením CSS o ďalšie funkcie, vďaka ktorým je výkonnejší. Najlepšia vec na Sass je jeho kompatibilita s CSS, čo znamená, že ho môžete použiť vo svojich projektoch vývoja webu s rámcami JavaScriptu, ako je React.
Na rozdiel od vanilkového CSS však na používanie Sass potrebujete trochu nastavenia. Zistite, ako to funguje, nastavením jednoduchého projektu React.js a integráciou Sass s ním.
Ako používať Sass vo svojom projekte React.js
Rovnako ako ostatné CSS procesory, Sass nie je natívne podporovaný Reactom. Ak chcete používať Sass v Reacte, musíte si nainštalovať závislosť tretej strany prostredníctvom správcu balíkov, ako je priadza alebo npm.
Môžete skontrolovať, či je npm alebo priadza nainštalovaná na vašom lokálnom počítači spustením npm --verzia alebo priadza --verzia. Ak v termináli nevidíte číslo verzie, nainštalovať npm alebo najprv priadzu.
Vytvorte projekt React.js
Ak chcete postupovať podľa tohto návodu, môžete si nastaviť jednoduchú aplikáciu React.js pomocou aplikácie create-react-app.
Najprv použite príkazový riadok na navigáciu do priečinka, v ktorom chcete vytvoriť svoj projekt React. Potom bežte npx create-react-app . Po dokončení procesu zadajte adresár aplikácie pomocou cd . Pridajte nasledujúci obsah do svojho App.js súbor ako spúšťač:
importovať Reagovať od "reagovať";
importovať "./App.scss";
funkciuApp() {
vrátiť (
<div názov triedy="obal">
<h1>Používanie Sass v React</h1>
<hlavička className="wrapper__btns">
<tlačidlo>Modré tlačidlo</button>
<tlačidlo>Červené tlačidlo</button>
<tlačidlo>Zelené tlačidlo</button>
</header>
</div> );
}
exportpredvolená App;Po nastavení základného projektu React je čas integrovať Sass.
Nainštalujte Sass
Sass môžete nainštalovať cez npm alebo priadzu. Nainštalujte ho cez priadzu spustením priadza pridať sass alebo ak dávate prednosť npm, spustite npm nainštalujte sass. Váš správca balíkov pridá najnovšiu verziu Sass do zoznamu závislostí v projekte package.json súbor.
Premenujte súbory .css na .scss alebo .sass
V priečinku projektu premenujte App.css a index.css na App.scss a index.scss.
Po premenovaní týchto súborov je potrebné aktualizovať importy v súboroch App.js a index.js, aby sa zhodovali s novými príponami súborov nasledovne:
importovať "./index.scss";
importovať "./App.scss";Od tohto momentu by ste mali používať príponu .scss pre akýkoľvek súbor štýlu, ktorý vytvoríte.
Import a používanie premenných a mixov
Jeden z najvýznamnejších výhody Sass je, že vám pomáha písať čisté, opakovane použiteľné štýly pomocou premenných a mixov. Aj keď nemusí byť zrejmé, ako môžete urobiť to isté v Reacte, nie je to také odlišné od používania Sass v projektoch napísaných pomocou jednoduchého JavaScriptu a HTML.
Najprv vytvorte nový Štýly priečinok vo vašom src priečinok. V priečinku Štýly vytvorte dva súbory: _variables.scss a _mixins.scss. Do súboru _variables.scss pridajte nasledujúce pravidlá:
$farba pozadia: #f06292;
$text-color: #f1d3b3;
$ btn-width: 120px;
$ btn-height: 40px;
$block-padding: 60px;A do súboru _mixins.scss pridajte nasledujúce:
@mixin vertical-list {
displej: flex;
align-items: center;
smer ohybu: stĺpec;
}Potom importujte premenné a mixiny v App.scss takto:
@import "./Štýly/premenné";
@import "./Styles/mixins";Použite svoje premenné a mixy v súbore App.scss:
@import "./Styles/variables.scss";
@import "./Styles/mixins";
.obal {
background-color: $background-color;
farba: $text-color;
padding: $block-padding;&__btns {
@zahŕňajú vertikálne-zoznam;
tlačidlo {
šírka: $ btn-width;
výška: $ btn-height;
}
}
}
Takto používate premenné a mixiny v Reacte. Okrem mixinov a premenných môžete použiť aj všetky ostatné úžasné funkcie v Sass, ako sú funkcie. Neexistuje žiadne obmedzenie.
Používanie Sass v React.js
Sass poskytuje viac funkcií nad rámec CSS, čo je presne to, čo budete potrebovať na napísanie opätovne použiteľného kódu CSS.
Sass môžete začať používať v Reacte tak, že si nainštalujete balík sass cez npm alebo yarn, aktualizujete svoje CSS súbory na .scss alebo .sass a potom aktualizujete svoje importy, aby používali novú príponu súboru. Potom môžete začať písať SCSS v Reacte.
