Изучите возможности SCSS с помощью простого приложения create-response-app

  1. В терминале:
create-react-app scss-demo
cd scss-demo
npm i node-sass
npm start

2. Переименуйте App.css в App.scss.

3. В App.js в строке 3 измените import './App.css'; на import 'App.scss';

4. Взгляните на App.scss, а затем замените код в App.scss следующим:

Обратите внимание, что в следующем коде scss мы можем:
a) Создавать переменные с помощью символа $
b) Иметь вложенные теги элементов, которые отражают нашу иерархию HTML

Это должно выглядеть точно так же, как страница по умолчанию create-react-app, как мы привыкли видеть.

5. Допустим, мы хотим сделать «Отредактируйте src / App.js и сохраните для перезагрузки». жирный шрифт для мобильных устройств. Это хорошая возможность показать вам, как импортировать другой файл .scss. Это помогает нам разделить обязанности и поддерживать порядок в scss. В терминале:

touch /src/_mobile.scss
open /src/_mobile.scss

6. In _mobile.scss:

7. Добавьте @import 'mobile'; в начало App.scss.

8. Мы даже можем создавать функции в scss, добавив следующий код в App.scss перед селекторами элементов:

9. В App.scss в селекторе .App-link добавьте @include grow(2em), это должно выглядеть так:

Попробуйте изменить аргумент 2em.

10. Чтобы показать вам, как использовать классы в scss, давайте добавим теги ul и ol в наш jsx. В App.js, внутри <header> и после тега <a>:

11. Теперь вернемся к App.scss, в функцииgrow мы собираемся написать класс:

12. Давайте воспользуемся нашим классом %list-item. В селекторе .App-header под селектором .App-link добавьте следующий код:

13. Давайте в нашем %list-item классе умножим padding: 0.5em на 2.

Странно, в обычном css этого нет, но попробуйте сами и радуйтесь! Это основные суперсилы, которые вы получаете от использования scss. Есть и более мощные функции, но давайте пока закончим. Наслаждайтесь своими новообретенными способностями!

Если вы хотите увидеть окончательный код этого руководства, вот App.js:

Вот App.scss:

Если вам это понравилось, посмотрите мою последнюю серию: Научитесь программировать в многопользовательской игре.

Я также провожу репетиторство в первый понедельник каждого месяца на Meetup.

Найдите меня на Youtube и Twitch, чтобы получить больше информации для разработчиков!