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

Sass — это улучшенная версия CSS, которую вы можете использовать в своих проектах React прямо сейчас.

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

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

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

Вы можете проверить, установлен ли на вашем локальном компьютере npm или Yarn, запустивНПМ --версияилипряжа --версия . Если вы не видите номер версии в своем терминале, сначала установите npm или Yarn.

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

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

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

Вы можете установить Sass через npm или Yarn. Установите его через пряжу, запустивпряжа добавить дерзостиили, если вы предпочитаете npm, запуститеnpm установить Sass . Ваш менеджер пакетов добавит последнюю версию Sass в список зависимостей в файле проекта.пакет.jsonфайл.

В папке проекта переименуйте App.css и index.css в App.scss и index.scss соответственно.

После того как вы переименовали эти файлы, вам необходимо обновить импорт в файлах App.js и index.js, чтобы они соответствовали новым расширениям файлов, следующим образом:

С этого момента вам следует использовать расширение .scss для любого создаваемого вами файла стиля.

Одним из наиболее значительных преимуществ Sass является то, что он помогает писать чистые, повторно используемые стили с использованием переменных и примесей. Хотя может быть неочевидно, как можно сделать то же самое в React, это не сильно отличается от использования Sass в проектах, написанных с использованием простого JavaScript и HTML.

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

И добавьте следующее в _mixins.scss:

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

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

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

Sass предоставляет больше функциональности поверх CSS, а это именно то, что вам понадобится для написания повторно используемого кода CSS.

Вы можете начать использовать Sass в React, установив пакет sass через npm или Yarn, обновив файлы CSS до .scss или .sass, а затем обновив импорт для использования нового расширения файла. После этого вы можете начать писать SCSS на React.

Элвин Ванджала — старший автор Android в MakeUseOf и разработчик программного обеспечения. Будучи заядлым пользователем Android, который влюбился в экосистему после того, как получил свое первое устройство в 2013 году, он стремится помочь пользователям максимально эффективно использовать свои устройства. Но, будучи техническим энтузиастом, который ежедневно использует несколько платформ, он также освещает iOS, Mac, социальные сети и другие темы широкого спектра потребительских технологий. Элвин начал писать в 2018 году в своем личном технологическом блоге, а профессионально — в 2019 году на TechTrendsKE, где он освещал общие новости технологий и обзоры продуктов. С тех пор его работы были представлены на XDA Developers и нескольких других веб-сайтах, посвященных технологиям. Помимо писательства, он получает второе образование в области информационных технологий, уделяя особое внимание разработке программного обеспечения.