Более-менее стандартный рабочий процесс с использованием Pug подразумевает, что используется какой-либо инструмент сборки или таскраннер вроде Gulp или Webpack, который полностью автоматизирует компиляцию HTML из Pug, как в dev-режиме, так и в build. То есть при грамотной настройке рабочего процесса описанная тобой проблема перекомиляции пропадает.
Актуальность зависит от объёма и характера задач. Простой лендинг или визитку может и не имеет смысла верстать с использованием Pug. На более-менее крупных проектах можно добиться серьезного прироста скорости благодаря упрощённому синтаксису и дополнительным фишкам типа миксинов и функций.
Так что, как и по отношению к любому инструменту, сначала нужно чётко понимать, зачем и когда его следует использовать. Если это понимание не пришло - скорее всего, пока не возникла та ситуация, когда инструмент реально нужен.

Учить https://learn.javascript.ru/ и реализовывать реальные задачи. Ставишь себе задачу, которая сложнее, чем то, что ты реально умеешь, и пытаешься её решить, обращаясь по всем непонятным вопросам к гуглу и вышеупомянутому учебнику. Только так можно чему-либо научиться, и не только в JS. Других путей нет.

Зачем ты выкатил сюда простыню кода? Никто не будет вчитываться или, тем более, тратить время, вставляя её в редактор. Проявляй элементарное уважение к сообществу, если хочешь помощи.
По существу вопроса: проблема, скорее всего, не в "масштабировании", а в том, что какой-то блок на странице вылезает за пределы контейнера, увеличивая общую ширину страницы. Проверяй через девтулс каждый контейнер, чтобы найти проблему.

P.S. Есть лайфхак для такой ситуации.
Применяешь следующие стили:

body * {
    box-shadow: 0 0 5px 1px #FF0000;
}

И все контейнеры подсвечиваются красной рамкой. Тот, что вылез за пределы окна, сразу будет видно невооружённым глазом.