Sass (синтаксически удивительные таблицы стилей) — это расширение CSS с дополнительными функциями, которые делают его более мощным. Самое лучшее в Sass — это его совместимость с CSS, что означает, что вы можете использовать его в своих проектах веб-разработки с такими средами JavaScript, как React.
Однако, в отличие от ванильного CSS, вам нужно немного настроить, чтобы использовать Sass. Узнайте, как это работает, настроив простой проект React.js и интегрировав с ним Sass.
Как использовать Sass в вашем проекте React.js
Как и другие процессоры CSS, Sass изначально не поддерживается React. Чтобы использовать Sass в React, вам необходимо установить стороннюю зависимость через менеджер пакетов, такой как yarn или npm.
Вы можете проверить, установлены ли npm или yarn на вашем локальном компьютере, запустив нпм --версия или пряжа --версия. Если вы не видите номер версии в своем терминале, установить нпм или пряжа в первую очередь.
Создайте проект React.js
Чтобы следовать этому руководству, вы можете настроить простое приложение React.js, используя create-react-app.
Сначала используйте командную строку, чтобы перейти к папке, в которой вы хотите создать проект React. Затем запустите npx создать-реагировать-приложение . После завершения процесса войдите в каталог приложения, используя CD . Добавьте следующий контент в свой App.js файл в качестве стартера:
Импортировать Реагировать от "реагировать";
Импортировать "./App.scss";
функцияПриложение() {
возвращаться (
<div имя_класса ="обертка">
<h1>Использование Sass в React</h1>
<имя класса заголовка ="обертка__btns">
<кнопка>Синяя кнопка</button>
<кнопка>Красная кнопка</button>
<кнопка>Зеленая кнопка</button>
</header>
</div> );
}
экспортпо умолчанию Приложение;После того, как вы настроили базовый проект React, пришло время интегрировать Sass.
Установить Sass
Вы можете установить Sass через npm или yarn. Установите его через пряжу, запустив пряжа добавить дерзость или, если вы предпочитаете npm, запустите npm установить sass. Ваш менеджер пакетов добавит последнюю версию Sass в список зависимостей в папке проекта. пакет.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 создайте два файла: _variables.scss и _mixins.scss. Добавьте следующие правила в _variables.scss:
$фоновый цвет: #f06292;
$текстовый цвет: #f1d3b3;
$btn-ширина: 120пкс;
$btn-высота: 40пкс;
$ блок-заполнение: 60пкс;И добавьте в _mixins.scss следующее:
@mixin вертикальный список {
дисплей: гибкий;
выравнивание элементов: по центру;
flex-направление: столбец;
}Затем импортируйте переменные и примеси в App.scss следующим образом:
@Импортировать "./Стили/переменные";
@Импортировать "./Стили/примеси";Используйте свои переменные и примеси в файле App.scss:
@Импортировать "./Стили/переменные.scss";
@Импортировать "./Стили/примеси";
.обертка {
цвет фона: $фоновый цвет;
цвет: $текстовый цвет;
заполнение: $ блок-заполнение;&__btns {
@включать вертикально-список;
кнопка {
ширина: $btn-ширина;
высота: $btn-высота;
}
}
}
Вот как вы используете переменные и примеси в React. Помимо примесей и переменных, вы также можете использовать все другие замечательные функции Sass, такие как функции. Нет никаких ограничений.
Использование Sass в React.js
Sass предоставляет больше возможностей поверх CSS, а это именно то, что вам нужно для написания повторно используемого кода CSS.
Вы можете начать использовать Sass в React, установив пакет sass через npm или yarn, обновив файлы CSS до .scss или .sass, а затем обновив импорт, чтобы использовать новое расширение файла. После этого можно приступать к написанию SCSS на React.
