feat(app): connect scss

[Artyom774]

Решил попробовать подключить SCSS. Переписал файлы стилей у Button и DeclarationInput. Ещё исправил ошибки у кнопок на странице статей и в модуле SheltersOnMain.

Изначально SCSS имел следующие преимущества перед CSS:
а) импорт файлов (в CSS3 уже есть);
б) использование переменных (тоже уже есть и просто в CSS3);
в) математические формулы (и это уже есть);
г) вложенные стили - то, что использовал в Button и DeclarationInput и из-за чего больше всего хотел добавить SCSS. Позволяет сокращать код и избегать дублирования. Лучше использовать только для модификаторов и псевдоклассов, так как если применять для компонентов, то потом сложнее будет найти нужный. Чтобы посмотреть какой будет итоговый селектор, надо навести мышку на конечный используемый в цепочке;
д) миксины - планирую использовать для шрифтов. Если по простому, то это как переменные, но для нескольких полей сразу. Позволяют вместо того, чтобы создавать условно по БЭМ shelter-h2-style с набором font-size, line-height и других стилей и добавлять для каждого заголовка этот стиль в разметку, можно в стилях заголовках передавать этот параметр. На практике ещё не сталкивался с ним, так что может что-то не так понял;
е) использование операторы, но по-моему единственный удачный пример, который нашёл - задать ряду элементов разные цвета, не прописывая каждый, а чтобы автоматом рассчитывались в зависимости от количества элементов в цикле for прямо в SCSS. Для других примеров, которые видел, по-моему, лучше всё-таки прямо в JS передавать разные стили.

И бонусом можно использовать двойной слеш для комментарий.

Брать и переписывать все файлы подряд не предлагаю (так как много и не везде нужны преимущества SCSS), а только писать новые сразу на нём и при редактировании тоже переписывать, если есть желание.

Что думаешь об этом всём?

Примечание: перед тем как запускать, надо установить зависимости npm i.