Sass (синтактично страхотни стилови таблици) е разширение на CSS с допълнителни функции, които го правят по-мощен. Най-доброто нещо при Sass е неговата съвместимост с CSS, което означава, че можете да го използвате във вашите проекти за уеб разработка с JavaScript рамки като React.
Въпреки това, за разлика от ванилия CSS, имате нужда от малко настройка, за да използвате Sass. Разберете как работи това, като настроите прост React.js проект и интегрирате Sass с него.
Как да използвате Sass във вашия проект React.js
Подобно на други CSS процесори, Sass не се поддържа първоначално от React. За да използвате Sass в React, трябва да инсталирате зависимост от трета страна чрез мениджър на пакети като yarn или npm.
Можете да проверите дали npm или yarn е инсталиран на вашата локална машина, като стартирате npm --версия или прежда --версия. Ако не виждате номер на версия във вашия терминал, инсталирайте npm или първо прежда.
Създайте React.js проект
За да следвате това ръководство, можете да настроите просто приложение React.js с помощта на create-react-app.
Първо, използвайте команден ред, за да отидете до папката, в която искате да създадете вашия React проект. След това бягайте npx create-react-app . След като процесът приключи, влезте в директорията на приложението, като използвате cd . Добавете следното съдържание към вашия App.js файл като начало:
импортиране Реагирайте от "реагира";
импортиране "./App.scss";
функцияПриложение() {
връщане (
<div className="обвивка">
<h1>Използване на Sass в React</h1>
<заглавка className="обвивка__btns">
<бутон>Син бутон</button>
<бутон>Червен бутон</button>
<бутон>Зелен бутон</button>
</header>
</div> );
}
износпо подразбиране Приложение;След като настроите основен React проект, е време да интегрирате Sass.
Инсталирайте Sass
Можете да инсталирате Sass чрез npm или yarn. Инсталирайте го чрез прежда, като стартирате прежда добавете дързост или, ако предпочитате npm, стартирайте npm инсталирайте sass. Вашият мениджър на пакети ще добави най-новата версия на Sass към списъка със зависимости в проекта package.json файл.
Преименувайте .css файлове на .scss или .sass
В папката на проекта преименувайте App.css и index.css съответно на App.scss и index.scss.
След като преименувате тези файлове, трябва да актуализирате импортиранията във вашите файлове App.js и index.js, за да съответстват на новите файлови разширения, както следва:
импортиране "./index.scss";
импортиране "./App.scss";От този момент нататък трябва да използвате разширението .scss за всеки стилов файл, който създавате.
Импортиране и използване на променливи и миксини
Един от най-значимите предимства на Sass е, че ви помага да пишете чисти, многократно използвани стилове, като използвате променливи и миксини. Въпреки че може да не е очевидно как можете да направите същото в React, това не е толкова различно от използването на Sass в проекти, написани с обикновен JavaScript и HTML.
Първо създайте нов Стилове папка във вашата src папка. В папката Стилове създайте два файла: _променливи.scss и _mixins.scss. Добавете следните правила към _variables.scss:
$фонов цвят: #f06292;
$text-color: #f1d3b3;
$btn-ширина: 120px;
$btn-височина: 40px;
$block-padding: 60px;И добавете следното към _mixins.scss:
@mixin вертикален списък {
дисплей: гъвкав;
подравняване на елементи: център;
flex-direction: колона;
}След това импортирайте променливи и миксини в App.scss, както следва:
@импортиране "./Стилове/променливи";
@импортиране "./Стилове/миксове";Използвайте вашите променливи и миксини във файла App.scss:
@импортиране "./Styles/variables.scss";
@импортиране "./Стилове/миксове";
.обвивка {
фонов цвят: $фонов цвят;
цвят: $text-color;
подплата: $block-padding;&__btns {
@включват вертикално-списък;
бутон {
ширина: $btn-ширина;
височина: $btn-height;
}
}
}
Ето как използвате променливи и миксини в React. Освен миксини и променливи, можете също да използвате всички други страхотни функции в Sass, като функции. Няма ограничение.
Използване на Sass в React.js
Sass предоставя повече функционалност в допълнение към CSS, което е точно това, от което ще се нуждаете, за да напишете повторно използваем CSS код.
Можете да започнете да използвате Sass в React, като инсталирате пакета sass чрез npm или yarn, актуализирате вашите CSS файлове до .scss или .sass, след което актуализирате вашите импортирания, за да използвате новото файлово разширение. След това можете да започнете да пишете SCSS в React.
