Как использовать Sass в React

Sass (синтаксически удивительные таблицы стилей) — это расширение CSS, которое содержит дополнительные функции, делающие его еще более мощным. Самое лучшее в Sass — это его совместимость с CSS. Это означает, что вы можете использовать Sass в проектах веб-разработки с такими средами JavaScript, как React.

Однако, в отличие от ванильного CSS, для использования Sass вам потребуется небольшая настройка. Давайте узнаем, как это работает, настроив простой проект React.js и интегрировав в него Sass.

Как использовать Sass в React.js. проект

Как и другие обработчики CSS, Sass не поддерживается React. Чтобы использовать Sass в React, вам необходимо установить сторонние зависимости через менеджер пакетов, такой как yarn или npm.

Вы можете проверить, установлены ли npm или yarn на вашем локальном компьютере, запустив npm –version или yarn –version . Если вы не видите номер версии в терминале, сначала установите npm или yarn.

Создайте проект React.js

Чтобы следовать этому руководству, вы можете настроить простое приложение React.js с помощью приложения create-react-app.

Сначала используйте эту команду, чтобы перейти в каталог, в котором вы хотите создать свой проект React. Затем запустите npx create-react-app. Этот процесс может занять некоторое время. Как только это будет сделано, войдите в каталог приложения с помощью cd . Для начала добавьте в файл App.js следующее:

импортировать React из «реагировать»; импортировать “./App.css”; function App() { return ( Синяя кнопка Красная кнопка Зеленая кнопка ); } экспортировать приложение по умолчанию;

После настройки базового проекта React пришло время интегрировать Sass.

Установить Sass

Вы можете установить Sass через npm или yarn. Установите его через yarn, запустив yarn add sass или, если вы предпочитаете npm, запустив npm install 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.

Сначала создайте новую папку Styles в папке src. В папке Styles создайте два файла: _variables.scss и _mixins.scss. Добавьте следующее правило в _variables.scss:

$фоновый цвет: #f06292; $текстовый цвет: #f1d3b3; $btn-ширина: 120px; $btn-height: 40px; $block-padding: 60px;

Добавьте следующий код в _mixins.scss:

@mixin vertical-list { display: flex; выравнивание элементов: по центру; flex-направление: столбец; }

Затем импортируйте переменные и примеси в App.scss следующим образом:

@import “./Стили/переменные”; @import “./Стили/примеси”;

Используйте переменные и примеси в файле App.scss:

@import “./Стили/переменные.scss”; @import “./Стили/примеси”; .wrapper {цвет фона: $ цвет фона; цвет: $текстовый цвет; заполнение: $ блок-заполнение; &__btns { @include vertical-list; кнопка { ширина: $btn-width; высота: $btn-высота; } } }

Вот как использовать переменные и примеси в React. Помимо примесей и переменных, вы также можете использовать все другие замечательные функции Sass, такие как функции. Нет ограничений, если вы настроили scss в своем проекте React.

Теперь вы можете использовать Sass в React, установив пакет sass через npm или yarn, следуя приведенным выше инструкциям. Надеюсь, статья будет вам полезна.