Изучите возможности SCSS с помощью простого приложения create-response-app
- В терминале:
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, чтобы получить больше информации для разработчиков!