Sass (syntakticky úžasné šablony stylů) je rozšíření CSS o další funkce, díky kterým je výkonnější. Nejlepší na Sass je jeho kompatibilita s CSS, což znamená, že jej můžete použít ve svých projektech vývoje webu s frameworky JavaScript, jako je React.
Na rozdíl od vanilkového CSS však k použití Sass potřebujete trochu nastavení. Zjistěte, jak to funguje, nastavením jednoduchého projektu React.js a integrací Sass s ním.
Jak používat Sass ve vašem projektu React.js
Stejně jako ostatní procesory CSS není Sass nativně podporován Reactem. Chcete-li používat Sass v Reactu, musíte si nainstalovat závislost třetí strany prostřednictvím správce balíčků, jako je yarn nebo npm.
Spuštěním můžete zkontrolovat, zda je na vašem místním počítači nainstalováno npm nebo yarn npm --verze nebo příze --verze. Pokud v terminálu nevidíte číslo verze, nainstalovat npm nebo nejprve přízi.
Vytvořte projekt React.js
Chcete-li postupovat podle tohoto průvodce, můžete si pomocí create-react-app nastavit jednoduchou aplikaci React.js.
Nejprve pomocí příkazového řádku přejděte do složky, ve které chcete vytvořit projekt React. Pak běžte npx create-react-app . Po dokončení procesu zadejte adresář aplikace pomocí CD . Přidejte následující obsah do svého App.js soubor jako spouštěč:
import Reagovat z "reagovat";
import "./App.scss";
funkceAplikace() {
vrátit se (
<div název_třídy="obal">
<h1>Používání Sass v Reactu</h1>
<záhlaví className="wrapper__btns">
<knoflík>Modré tlačítko</button>
<knoflík>Červené tlačítko</button>
<knoflík>Zelené tlačítko</button>
</header>
</div> );
}
vývoznívýchozí Aplikace;Jakmile nastavíte základní projekt React, je čas integrovat Sass.
Nainstalujte Sass
Sass můžete nainstalovat přes npm nebo přízi. Nainstalujte jej pomocí příze spuštěním příze přidat sass nebo, pokud dáváte přednost npm, spusťte npm nainstalovat sass. Váš správce balíčků přidá nejnovější verzi Sass do seznamu závislostí v projektu package.json soubor.
Přejmenujte soubory .css na .scss nebo .sass
Ve složce projektu přejmenujte App.css a index.css na App.scss a index.scss.
Po přejmenování těchto souborů je třeba aktualizovat importy v souborech App.js a index.js, aby odpovídaly novým příponám souborů následovně:
import "./index.scss";
import "./App.scss";Od tohoto okamžiku byste měli používat příponu .scss pro jakýkoli soubor stylu, který vytvoříte.
Import a používání proměnných a mixinů
Jeden z nejvýznamnějších výhody Sass spočívá v tom, že vám pomáhá psát čisté, opakovaně použitelné styly pomocí proměnných a mixinů. I když nemusí být zřejmé, jak můžete udělat totéž v Reactu, není to tak odlišné od použití Sass v projektech napsaných pomocí prostého JavaScriptu a HTML.
Nejprve vytvořte nový Styly složku ve vašem src složku. Ve složce Styly vytvořte dva soubory: _variables.scss a _mixins.scss. Přidejte do _variables.scss následující pravidla:
$background-color: #f06292;
$text-color: #f1d3b3;
$btn-width: 120px;
$ btn-height: 40px;
$blokování: 60px;A do _mixins.scss přidejte následující:
@mixin vertical-list {
displej: flex;
align-items: center;
směr ohybu: sloupec;
}Poté importujte proměnné a mixiny do App.scss následovně:
@import "./Styly/proměnné";
@import "./Styly/mixiny";Použijte své proměnné a mixiny v souboru App.scss:
@import "./Styles/variables.scss";
@import "./Styly/mixiny";
.obal {
background-color: $background-color;
barva: $text-color;
padding: $block-padding;&__btns {
@zahrnout vertikální-seznam;
knoflík {
šířka: $btn-width;
výška: $btn-height;
}
}
}
Takto používáte proměnné a mixiny v Reactu. Kromě mixinů a proměnných můžete v Sass používat také všechny další úžasné funkce, jako jsou funkce. Neexistuje žádné omezení.
Použití Sass v React.js
Sass poskytuje více funkcí nad rámec CSS, což je přesně to, co budete potřebovat k psaní opakovaně použitelného kódu CSS.
Sass můžete začít používat v Reactu tak, že si nainstalujete balíček sass přes npm nebo yarn, aktualizujete soubory CSS na .scss nebo .sass a poté aktualizujete své importy, aby používaly novou příponu souboru. Poté můžete začít psát SCSS v Reactu.
