A Sass (szintaktikailag félelmetes stíluslapok) a CSS kiterjesztése további funkciókkal, amelyek hatékonyabbá teszik. A legjobb dolog a Sass-ban a CSS-szel való kompatibilitása, ami azt jelenti, hogy használhatja webfejlesztési projektjeiben JavaScript-keretrendszerekkel, például a React-tal.
A vanília CSS-sel ellentétben azonban a Sass használatához némi beállításra van szükség. Fedezze fel, hogyan működik ez egy egyszerű React.js projekt beállításával, és a Sass integrálásával.
A Sass használata a React.js projektben
Más CSS-processzorokhoz hasonlóan a Sasst sem támogatja a React. A Sass in React használatához telepítenie kell egy harmadik féltől származó függőséget egy csomagkezelőn keresztül, például a yarn vagy az npm segítségével.
A futtatással ellenőrizheti, hogy az npm vagy a yarn telepítve van-e a helyi gépen npm --verzió vagy fonal -- változat. Ha nem látja a verziószámot a terminálon, npm telepítése vagy először fonal.
Hozzon létre egy React.js projektet
Az útmutató követéséhez beállíthat egy egyszerű React.js alkalmazást a create-react-app használatával.
Először egy parancssor segítségével keresse meg azt a mappát, amelyben létre szeretné hozni a React projektet. Aztán fuss npx Create-React-app . A folyamat befejeztével lépjen be az alkalmazáskönyvtárba a segítségével CD . Adja hozzá a következő tartalmat a sajátjához App.js fájl indítóként:
import Reagál tól től "reagál";
import "./App.scss";
funkcióApp() {
Visszatérés (
<div className="csomagolás">
<h1>Sass használata a Reactban</h1>
<fejléc className="wrapper__btns">
<gomb>Kék gomb</button>
<gomb>Piros gomb</button>
<gomb>Zöld gomb</button>
</header>
</div> );
}
exportalapértelmezett App;Miután beállította az alap React projektet, itt az ideje a Sass integrálásának.
Telepítse a Sass-t
A Sass-t npm-en vagy fonallal telepítheti. Futtatással telepítse fonan keresztül fonal add sass vagy ha jobban szereti az npm-et, fuss npm install sass. A csomagkezelő hozzáadja a Sass legújabb verzióját a projekt függőségi listájához package.json fájlt.
Nevezze át a .css fájlokat .scss vagy .sass formátumra
A projekt mappájában nevezze át az App.css-t és az index.css-t App.scss-re, illetve index.scss-re.
Miután átnevezte ezeket a fájlokat, frissítenie kell az App.js és index.js fájlok importálását, hogy az megfeleljen az új fájlkiterjesztéseknek az alábbiak szerint:
import "./index.scss";
import "./App.scss";Ettől kezdve minden létrehozott stílusfájlhoz az .scss kiterjesztést kell használnia.
Változók és mixek importálása és használata
Az egyik legjelentősebb a Sass előnyei az, hogy segít tiszta, újrafelhasználható stílusokat írni változók és mixinek segítségével. Noha nem egyértelmű, hogyan teheti meg ugyanezt a Reactben, ez nem különbözik annyira a Sass használatától az egyszerű JavaScript- és HTML-kóddal írt projektekben.
Először hozzon létre egy újat Stílusok mappájában src mappát. A Stílusok mappában hozzon létre két fájlt: _variables.scss és _mixins.scss. Adja hozzá a következő szabályokat a _variables.scss fájlhoz:
$háttérszín: #f06292;
$text-color: #f1d3b3;
$btn-szélesség: 120px;
$btn-magasság: 40px;
$block-padding: 60px;És adja hozzá a következőket a _mixins.scss fájlhoz:
@mixin vertical-list {
kijelző: flex;
align-ites: center;
hajlítási irány: oszlop;
}Ezután importálja a változókat és mixineket az App.scss fájlba az alábbiak szerint:
@import "./Stílusok/változók";
@import "./Stílusok/mixinek";Használja változóit és mixeit az App.scss fájlban:
@import "./Styles/variables.scss";
@import "./Stílusok/mixinek";
.csomagolás {
háttérszín: $háttérszín;
szín: $szöveg-szín;
padding: $block-padding;&__btns {
@tartalmazza függőleges-lista;
gomb {
szélesség: $btn-width;
magasság: $btn-height;
}
}
}
Így használsz változókat és mixineket a Reactban. A mixineken és a változókon kívül a Sass összes többi fantasztikus funkcióját is használhatja, például a függvényeket. Nincs korlátozás.
A Sass használata a React.js-ben
A Sass több funkcionalitást biztosít a CSS-n felül, ami pontosan az, amire szüksége lesz az újrafelhasználható CSS-kód írásához.
A Sass használatát a Reactban úgy kezdheti meg, hogy telepíti a sass csomagot npm-en vagy yarn-en keresztül, frissíti a CSS-fájlokat .scss vagy .sass formátumra, majd frissíti az importált fájlokat az új fájlkiterjesztés használatára. Ezt követően elkezdheti az SCSS írását a Reactban.